如何使用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，并正确地绑定它？

很抱歉发了这么长的帖子，如果有任何帮助，我们将不胜感激。

Answer 1

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

然而，我的文件结构与您的不同。

​

​

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

index.js：

import "./sass/main.scss";

main.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中尝试了公共路径，但是没有用。

除了入口点之外，我的通用代码几乎与您的完全相同。我的是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"
          }
        ]
      }
    ]
  }
});

这在无数个小时后为我解决了这个问题。如果这对你有任何帮助，请告诉我。干杯。

Answer 2

问题不在webpack。您的问题出在后台url路径中。由于您已经将所有css导入到单个main.scss中，因此您需要在后台url中执行以下操作-

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

Answer 3

您还可以尝试对相对路径和绝对路径使用resolve.modules。通过添加到您的配置文件：

module.exports = {
  ...,
  resolve: {
    modules: [
      path.resolve(__dirname, "img"),
      "node_modules"
    ],
  },
  ...
}

然后，您可以使用以下命令从您的sass文件访问您的映像：

background-image: url("~homepage-login-prog.jpg");

或者用相对路径替换代字号。