unable to generate sourcemap for sass with asset/resource

[samuelcolvin]

Thank you for webpack, it's awesome.

My setup is successfully compiling sass/scss and outputting a .css file which I'm referencing in js, however unfortunately I can't get a .css.map (source map for the scss) file to be generated too.

What I'd really like is the equivalent of

./node_modules/.bin/sass --source-map-urls=relative src/styles/main.scss dist/assets/main.css

which generates main.css and main.css.map.

I have the following module rules in webpack.config.js:

    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          // transpileOnly: true,
        },
      },
      {
        test: /\.s[ac]ss$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name].css[query]',
        },
        use: [
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              sassOptions: {
                outputStyle: 'expanded',
              },
            },
          },
        ],
      },
      {
        test: /\.(css|png|ico|jpe?g|svg|woff2?|ttf)$/i,
        type: 'asset/resource',
      },
    ],

I I know that the sass-loader is generating a source map - I inserted a log statement here:

https://github.com/webpack-contrib/sass-loader/blob/6ceaa0fe8bce480159d06e856680f2edab13847a/src/index.js#L83

and the map is present and populated. However webpack seems to be discarding the map while I need it to be written to assets/[name].css.map.

I've tried numerous values of devtool but it doesn't seem to make any difference. I've also tried adding style-loader and css-loader, but that seems to break the css generating and doesn't cause a source map to be generated.

Is this a limitation of type: 'asset/resource', or am I doing something wrong? Could I implement my own loader to accomplish this?

Notable dependency version:

    "css-loader": "^5.2.6",
    "sass": "^1.34.1",
    "sass-loader": "^12.0.0",
    "style-loader": "^2.0.0",
    "ts-loader": "^9.2.2",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0"

[alexander-akait]

Please pass these options https://sass-lang.com/documentation/js-api#sourcemap to sassOptions, not sourceMap, the sourceMap option for internal source maps (handled and extracted/inlined by webpack), but here you need external source maps (i.e. from sass), but I do not recommend do it

[alexander-akait]

I strongly recommend do not do it

[samuelcolvin]

I'd much prefer not to do it this way, but I needed to get something to work, and this is working.

I'm deploying to cloudflare workers, not standard browser, thus I need a separate .css.map file, not a .js.map file.

[alexander-akait]

You lose all dep (i.e. @import/@use/etc) and lose tracking them, it will be big problem, not only for watch, also for caches

[alexander-akait]

You can click ... on your issue and create the issue from original question, then format it

[samuelcolvin]

webpack-contrib/sass-loader#962