Webpack集成sass-loader后无法生成正确Source Map的问题

问题现象 #

移除sass-loader时，Webpack可正常生成包含sourcesContent的Source Map；添加sass-loader后，Source Map丢失sourcesContent字段，浏览器调试时无法加载SCSS源文件，报错：

Could not load content for webpack://editify-v2/src/styles/delete.scss
(Fetch through target failed: Unsupported URL scheme; Fallback: HTTP
error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

当前Webpack配置 #

entry: {
  index: './src/index.tsx',
  'second-entry': './src/second-entry.ts',
},
devtool: 'source-map',
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js',
},
module: {
  rules: [
    babelRule,
    {
      test: /\.s?css$/,
      use: [
        MiniCssExtractPlugin.loader,// "style-loader",
        { loader: 'css-loader', options: { sourceMap: true } },
        { loader: 'sass-loader',  options: { sourceMap: true }, },
      ],
    },
  ],
},
plugins: [
  new HtmlWebpackPlugin({
    template: './src/editor-index.html',
    filename: 'editor-index.html',
    chunks: ['index'], // Specify the chunks to include in the HTML
  }),
  new MiniCssExtractPlugin({}),
],

Source Map对比 #

• 添加sass-loader后的失效Map：

{
    "version": 3,
    "file": "index.css",
    "mappings": ";;;;AACE;EACE;AAAJ,C;;;;ACFA;EACE;AACF,C",
    "sources": ["webpack://editify-v2/./src/styles/delete.scss", "webpack://editify-v2/./src/styles/main.css"],
    "names": [],
    "sourceRoot": ""
}

缺少sourcesContent字段

• 移除sass-loader后的正常Map：

{
    "version": 3,
    "file": "index.css",
    "mappings": ";;;;AAAA;EACE;IACE,uBAAuB;;EAEzB;AACF;;;;;ACLA;EACE,YAAY;AACd",
    "sources": ["webpack://editify-v2/./src/styles/delete.scss", "webpack://editify-v2/./src/styles/main.css"],
    "sourcesContent": [".button {\n  div{\n    background-color: 'red';\n\n  }\n}\n", ".app {\n  color: green;\n}\n"],
    "names": [],
    "sourceRoot": ""
}

依赖版本 #

"devDependencies": {
  "babel-loader": "^9.1.3",
  "css-loader": "^6.8.1",
  "html-webpack-plugin": "^5.5.3",
  "mini-css-extract-plugin": "^2.8.1",
  "postcss-loader": "^8.1.1",
  "sass": "^1.80.6",
  "sass-loader": "^16.0.3",
  "style-loader": "^3.3.3",
  "webpack": "^5.88.2",
  "webpack-cli": "^5.1.4",
  "webpack-dev-server": "^4.15.1",
}

注：使用sass而非已废弃的node-sass

解决方案 #

1. 强制sass-loader保留源内容 #

在sass-loader的配置中添加sourceMapContents: true，确保Sass编译时将源文件内容写入Source Map：

{
  loader: 'sass-loader',
  options: {
    sourceMap: true,
    sassOptions: {
      sourceMapContents: true
    }
  },
}

2. 优化css-loader的Source Map传递 #

显式设置importLoaders: 1，确保css-loader正确处理前置sass-loader生成的Source Map：

{
  loader: 'css-loader',
  options: {
    sourceMap: true,
    importLoaders: 1
  }
}

3. 检查MiniCssExtractPlugin配置 #

确保插件未禁用Source Map，默认情况下它会继承Webpack的devtool配置，无需额外设置，但如果有显式配置需确认：

new MiniCssExtractPlugin({
  filename: '[name].css'
})

4. 版本兼容性调整（可选） #

尝试降级sass到1.77.x版本，部分新版本Sass的Source Map处理逻辑可能存在兼容性问题。

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