javascript - 如何使用 webpack-4 解析 sass 文件中的背景图像 URL？

Question

这是我第一次在这里写作，所以请记住这一点。我第一次在项目中使用 webpack，我遇到了一个问题，我试图在我的 sass 文件中使用背景 url() 函数设置背景图像，如下所示:

.img-container {
  background: url('../../img/homepage-login-prog.jpg') no-repeat center center fixed;
  background-size: cover;
}

我的文件夹结构是:

- css
  | app.css
- dist (this folder is created after building for production)
- img
  | some-image.jpg
- js
  | app.js (entry point for webpack output, 
            this is where I import main.scss file)
- js-vendor
  | vendor.js (third-party libraries like bootstrap, jquery)
- sass  (this is where I keep all my sass files which get compiled using 
         webpack loaders)
  | components
    | greetings-section.scss
    | navbar.scss
  | main.scss
  | variables.scss
- template.html
- webpack.common.js
- webpack.dev.js
- webpack.prod.js

因为我已经为开发和生产配置了 webpack，所以我对它们都有单独的文件，它们都扩展了通用(通用)配置文件。那个看起来像这样:

const path = require("path");

module.exports = {
  entry:{
    main: "./js/app.js",
    vendor: "./js-vendor/vendor.js"
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(svg|png|jp(e*)g|gif)$/,
        use: [{
          loader: "file-loader",
          options: {
            name: "[name].[hash].[ext]",
            outputPath: "img",
          }
        }]
      }
    ]
  }
};

我的 webpack 开发配置如下所示:

const common = require("./webpack.common");
const merge = require("webpack-merge");
const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./template.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[contentHash].min.css"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../../"
            }
          },
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  }
});

所以，webpack-dev-server 启动后，会弹出一个错误:

ERROR in ./sass/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./sass/main.scss)
Module not found: Error: Can't resolve '../../img/homepage-login-prog.jpg' in 'C:\Users\...\...\...\sass'

如您所见，我尝试使用 mini-css-extract-plugin 中的 publicPath 选项设置相对路径，但它并没有为我解决问题。
我也一直在读到其他人也有类似的问题，但他们的解决方案都不适合我，所以我想问的是，有谁知道我如何配置 webpack 来识别我的 sass 中图像的 url文件，并正确绑定(bind)它？

对不起，很长的帖子，任何帮助将不胜感激。

Answer 1

遇到了类似的问题，对我有用的是将 main.scss 文件移动到我的 sass 文件夹中。之前，它位于 src 文件夹中。 main.scss 文件导入我所有的其他 .scss 文件。在作为入口点的 index.js 中，我导入 main.scss 文件。

但是，我的文件结构与您的不同。



我有一个用于输出的 dist 文件夹和一个用于输入的 src 文件夹。

index.js:

import "./sass/main.scss";

主要.scss:

@import "./footer";
@import "./header";
@import "./home";
@import "./navigation";
@import "./reset";
@import "./typography";
@import "./variables";

_header.scss:

  #hero {
  background-image: url("../assets/heroImage.jpg");
  background-size: cover;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

由于我的 scss 代码中的 background-image: url() 问题，我得到了同样的错误。这个导入结构为我解决了这个问题。

对于我的 webpack，我有一个非常相似的配置，分为 3 个、common、dev 和 prod。我添加的唯一插件是 webpack.dev 中的“resolve-url-loader”。我试过 miniCssExtractPlugin 中的 publicpath 无济于事。

除了入口点之外，我的共同点几乎与您的完全相同。我的是 src 文件夹中的 index.js 而不是 app.js。

webpack.dev.js

const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = merge(common, {
  mode: "development",
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/template.html"
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "resolve-url-loader"
          },
          {
            loader: "sass-loader"
          }
        ]
      }
    ]
  }
});

无数小时后，这为我解决了这个问题。让我知道这是否对您有任何帮助。干杯。