webpacksasscss-loaderwebpack-style-loadersass-loader

Webpack sass-loader not generating correct source maps

I have a webpack config which contains sass-loader. When i remove the sass-loader i can see properly generated source maps. But when i add sass-loader back sourcemaps are broken.

    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({}),
    ],

I have swapped tried with style-loader and MiniCSSExtract, i have tried several devtool options. All gives the same error.

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)

enter image description here

Generated index.css.map with sass-loader (missing sourceContent)

{
    "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": ""
}

Correct source map without sass-loader

{
    "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": ""
}

Here are my versions

  "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",
  }

Note im not using node-sass but rather sass.(Webpacks official doc suggests node-sass but its deprecated).

Solution

  • since sass-loader >= 16.0.0 the generating of sourceContent in source-map is disabled.

    Solution

    To the sass-loader options add the sassOptions.sourceMapIncludeSources option:

      {
    test: /\.s?css$/,
    use: [
      MiniCssExtractPlugin.loader,// "style-loader",
      { loader: 'css-loader', options: { sourceMap: true } },
      // include the sources in the generated source map, required since sass-loader >= 16.0.0
      { loader: 'sass-loader',  options: { sassOptions: { sourceMapIncludeSources: true } } },
    ],
  },