如何使用 webpack-4 解析 sass 文件中的背景图片 URL? [英] How can I resolve background image URL inside sass file using webpack-4?

问题描述

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

this is my first time writing here so please bear that in mind. I'm first time using webpack in a project and I have a problem where I'm trying to set a background image using background url() function in my sass file, something like this:

.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，所以我为它们都有单独的文件，其中都扩展了通用(通用)配置文件.那个看起来像这样:

Because I have webpack configured both for development and production, I have separate files for both of them, where both extend on general (common) configuration file. That one looks like this:

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 开发配置如下所示:

My webpack dev configuration looks like this:

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 启动后，弹出一个错误:

So, after webpack-dev-server starts, it pops an error:

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文件，并正确绑定它?

As you can see I've tried setting a relative path using publicPath option in mini-css-extract-plugin, but it doesn't solve it for me. I've also been reading that other people have similar problems, but none of their solutions worked for me, so what I'm trying to ask is, does anyone know how can i configure webpack to recognize the url of a image inside my sass files, and properly bind it?

抱歉，帖子太长，任何帮助将不胜感激.

Sorry for the long post, any help would be greatly appreciated.

推荐答案

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

Ran into a similar problem and what worked for me was to move my main.scss file into my sass folder. Before, it was in the src folder. The main.scss file imports all my other .scss files. Inside my index.js, which is the entry point, I import the main.scss file.

然而，我的文件结构与你的不同.

My file structure however is different than yours.

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

I have a dist folder for the output, and the src folder for input.

index.js:

import "./sass/main.scss";

main.scss:

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

_header.scss:

_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() 问题，我得到了完全相同的错误.这个导入结构为我解决了这个问题.

I have been getting the same exact error because of the background-image: url() problem in my scss code. This import structure solved it for me.

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

For my webpack, I have a very similar config split into 3, common, dev, and prod. The only plugin I added is 'resolve-url-loader' in webpack.dev. I've tried the publicpath in miniCssExtractPlugin to no avail.

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

My common is almost the exact same as yours except for the entrypoint. Mine is index.js in the src folder and not app.js.

webpack.dev.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"
          }
        ]
      }
    ]
  }
});

这在无数小时后为我解决了.如果您有任何帮助，请告诉我.干杯.

This solved it for me after countless hours. Let me know if you this helps in any way. Cheers.

这篇关于如何使用 webpack-4 解析 sass 文件中的背景图片 URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！