SASS编译报错：无法解析图片路径，请求技术帮助

架构老林

2026-7-29

解决SASS编译时图片路径无法解析的问题

1. 修正SCSS中的图片路径错误

你的_Home.scss文件位于src/styles/pages/目录下，要引用src/images/bg.png，正确的相对路径应该是../../images/bg.png——从pages目录向上两级就到了src目录，不需要重复写src。

错误写法：

background-image: url('../../src/images/bg.png');

修正后：

background-image: url('../../images/bg.png');

2. 检查webpack中resolve-url-loader的配置

如果修正路径后仍报错，确认webpack配置中resolve-url-loader和sass-loader的设置：

确保resolve-url-loader在sass-loader之前执行
必须开启sass-loader的sourceMap选项，resolve-url-loader依赖source map才能正确解析相对路径

示例webpack规则片段：

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'resolve-url-loader',
          options: { sourceMap: true }
        },
        {
          loader: 'sass-loader',
          options: { sourceMap: true } // 此选项必须开启
        }
      ]
    }
  ]
}