Webpack 5无法解析background-image的URL路径，求解决方案

1. 先核对SCSS里的路径写法 #

• 相对路径要对应SCSS文件的位置：比如SCSS在src/styles/main.scss，图片在src/images/bg.png，就得写../images/bg.png，别写错层级
• 别用~前缀：Webpack 5已经弃用这种写法，直接写正常路径就行
• 绝对路径要从项目根目录出发：比如/src/images/bg.png，得确保文件真实存在这个位置

2. 调整Webpack的asset模块配置 #

Webpack 5用asset模块替代了旧的url-loader/file-loader，正确配置如下：

SCSS处理链要保证顺序和参数正确 #

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 生产环境可以换成MiniCssExtractPlugin.loader
          {
            loader: 'css-loader',
            options: {
              url: true, // 显式开启URL解析，默认是开的，但保险起见写上
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource', // 把图片输出到指定目录，对应原来的file-loader
        // 小图可以用asset/inline转base64：type: 'asset/inline'
        generator: {
          filename: 'static/images/[name].[contenthash][ext]', // 自定义输出路径，按需修改
        },
      },
    ],
  },
  // 如果用MiniCssExtractPlugin，记得在plugins里加
  // plugins: [new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css' })]
};

3. 匹配文件目录结构 #

举个目录例子，要是你的结构是：

你的项目/
├─ src/
│  ├─ styles/
│  │  └─ index.scss
│  ├─ assets/
│  │  └─ images/
│  │     └─ bg.jpg
└─ webpack.config.js

那SCSS里就得写background-image: url('../assets/images/bg.jpg');，层级错了肯定找不到文件

4. 清理缓存&检查Node版本 #

• 删掉node_modules/.cache目录，或者构建时加--no-cache参数：webpack --no-cache
• 你的Node v14.18.1和Webpack 5兼容没问题，但缓存有时候会搞鬼

5. 核对依赖版本 #

确保这些loader版本适配Webpack 5：

• sass-loader: 12.x以上
• css-loader: 6.x以上
• sass: 1.32.x以上
  可以跑npm list sass-loader css-loader sass看版本，版本太低容易出兼容问题

内容的提问来源于stack exchange，提问作者Zain Zahid