Webpack 5：sass 找不到图像路径

Question

我刚开始使用 webpack。我在尝试访问我的 scss 文件中的图像时遇到问题。我似乎成功的唯一方法是使用以下路径格式：

background-image: linear-gradient(to right bottom, rgba(0, 128, 0, 0.158), rgba(255, 166, 0, 0.151)), url('/Users/username/Desktop/Web_Design/MyDesk/webpack-project/src/images/bg.jpg');

诸如此类的其他任何内容：

   background-image: linear-gradient(to right bottom, rgba(0, 128, 0, 0.158), rgba(255, 166, 0, 0.151)), url('../../images/bg.jpg');

会导致如下编译错误：

ERROR in ./src/scss/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../../images/bg.jpg' in '/Users/username/Desktop/Web_Design/MyDesk/webpack-project/src/scss'

这是我的 webpack 配置：

const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

let mode = 'development'
let target = 'web'

const plugins = [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin(),
    new htmlWebpackPlugin({
      template: './src/index.html'
    }),
   
  ];

if(process.env.NODE_ENV === 'production'){
    mode= 'production',
    target = 'browserslist'
}

module.exports = {
    mode: mode,
    target: target,
    output:{
      path: path.resolve(__dirname, 'dist'),
      assetModuleFilename: 'images/[hash][ext][query]',
    },

    module: {
        rules: [
          {
            test: /\.(s[ac]|c)ss$/i,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                // This is required for asset imports in CSS, such as url()
                // options: { publicPath: "" },
                options: { publicPath: "./src/" },
              },
              "css-loader",
              "postcss-loader",
              // according to the docs, sass-loader should be at the bottom, which
              // loads it first to avoid prefixes in your sourcemaps and other issues.
              "sass-loader",
            ],
          },
          {
            test: /\.(png|jpe?g|gif|svg)$/i,
            /**
             * The `type` setting replaces the need for "url-loader"
             * and "file-loader" in Webpack 5.
             *
             * setting `type` to "asset" will automatically pick between
             * outputing images to a file, or inlining them in the bundle as base64
             * with a default max inline size of 8kb
             */
            type: "asset",
            parser:{
              dataUrlCondition:{
                maxSize: 30 * 1024,
              }

            },
    
            /**
             * If you want to inline larger images, you can set
             * a custom `maxSize` for inline like so:
             */
            // parser: {
            //   dataUrlCondition: {
            //     maxSize: 30 * 1024,
            //   },
            // },
          },
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: {
              // without additional settings, this will reference .babelrc
              loader: "babel-loader",
              options: {
                /**
                 * From the docs: When set, the given directory will be used
                 * to cache the results of the loader. Future webpack builds
                 * will attempt to read from the cache to avoid needing to run
                 * the potentially expensive Babel recompilation process on each run.
                 */
                cacheDirectory: true,
              },
            },
          },
        ],
      },
    
      plugins: plugins,
    
      target: target,
    
      devtool: "source-map",
    
      resolve: {
        extensions: [".js", ".jsx"],
      },
    
      // required if using webpack-dev-server
      devServer: {
        contentBase: "./dist",
        hot: true,
      },
    };

知道什么可以帮助我解决这个问题吗？提前谢谢你。

Answer 1

远景，但看起来您的文件结构与我的项目相同，因此您可能只需要上一个目录进行导入（即 ../images/bg.jpg 而不是 ../../images/bg.jpg ).

我在查找两个目录时遇到了与您相同的错误，尽管它们可能不相关。

Answer 2

显然我的问题出在我的 publicPath 配置上。我不得不将其修改为：

{
                loader: MiniCssExtractPlugin.loader,
                // This is required for asset imports in CSS, such as url()
                options: { publicPath: "." },
              },

一旦我对我的 puclicPath 做了这个，我就可以像这样加载我的 url ims：

 background-image: linear-gradient(to right bottom, rgba(0, 128, 0, 0.158), rgba(255, 166, 0, 0.151)),url('../images/bg.jpg');

Webpack 5：sass 找不到图像路径

Webpack 5: sass doesn't find path for images

image

path

webpack