Webpack 4集成sass-loader与resolve-url-loader：图片路径无法找到

我之前也碰到过一模一样的问题，Webpack 4里用resolve-url-loader处理SCSS中的图片路径确实有几个容易踩的坑，你这个情况大概率是loader顺序不对或者sourceMap没正确开启——这俩可是resolve-url-loader生效的核心前提！

1. 先检查Loader的执行顺序（重中之重） #

Webpack的loader是从右到左执行的，所以处理SCSS的loader顺序绝对不能搞反，正确的顺序应该是：
sass-loader → resolve-url-loader → css-loader → style-loader（如果你是把CSS提取到单独文件，就换成MiniCssExtractPlugin.loader）

给你贴个能跑的配置示例：

const path = require('path');
// 如果用提取CSS的插件，记得先引入
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // 替换成 MiniCssExtractPlugin.loader 即可提取CSS
          {
            loader: 'css-loader',
            options: {
              sourceMap: true, // 必须开，不然resolve-url-loader拿不到正确的路径信息
            }
          },
          {
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true, // 同样必须开启
              // 要是你的绝对路径需要映射到项目根目录，加这个配置
              // root: path.resolve(__dirname, './')
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true, // 这是最容易忘的！没有这个resolve-url-loader直接罢工
            }
          }
        ]
      },
      // 别忘了配置图片资源的处理，不然图片不会被加哈希打包
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'static/img/[name].[contenthash][ext]' // 这里定义带哈希的输出路径
        }
      }
    ]
  },
  // plugins: [
  //   new MiniCssExtractPlugin({
  //     filename: 'css/[name].[contenthash].css' // 提取CSS的输出配置
  //   })
  // ]
};

2. 调整SCSS里的url路径写法 #

你现在用的是绝对路径 /static/img/audiences.png，resolve-url-loader默认会把这种开头的路径当成外部资源，直接跳过处理。有两种解决方式：

• 方法一：改成相对路径
  假设你的SCSS文件在src/styles目录下，图片在项目根目录的static/img，那路径可以写成：

span.arrow { background: url('../../static/img/audiences.png'); }

• 方法二：给resolve-url-loader加root配置
  如果不想改SCSS里的路径，就在resolve-url-loader的options里加root: path.resolve(__dirname, './')，这样它就会把以/开头的路径映射到项目根目录，就能正确识别你的图片了。

3. 额外检查：资源处理loader是否配置正确 #

一定要确保你已经配置了处理图片的loader（比如上面示例里的asset/resource，或者老版本的file-loader），并且正确设置了带哈希的输出文件名。只有图片被Webpack正确打包成带哈希的文件，resolve-url-loader才能把SCSS里的路径替换成最终的哈希路径。

我当时就是因为漏开了sass-loader的sourceMap，折腾了半天，你先把这几个点检查一遍，应该就能解决问题了！

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