unable to generate sourcemap with asset/resource

[samuelcolvin]

Copied from webpack discussion: https://github.com/webpack/webpack/discussions/13505

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 --embed-sources 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"

---

I've also tried something like:

      {
        test: /\.s[ac]ss$/i,
        type: 'asset/resource',
        use: [
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                sourceMap: true,  // tried as path too
                sourceMapEmbed: true,
                outputStyle: 'expanded',
              },
            },
          },
        ],
      },

---

See the above discussion for a custom loader I wrote which resolved this (at the price of lots of other problems)

[xoxys]

@alexander-akait What's needed to get the existing PR done?

[alexander-akait]

Need finish https://github.com/webpack-contrib/sass-loader/pull/968 and rebase

[xoxys]

Not sure if @cap-Bernardito is still actively working on it. Anything I can help with? I guess I would have to supersede the PR in this case.

[alexander-akait]

Yes, feel free to resend PR :+1:

[jivemedia]

Still having this issue using asset/resource - take it this was never resolved?

[alexander-akait]

@jivemedia Feel free to send a PR, you can use it https://github.com/webpack-contrib/sass-loader/pull/1010/, I think we should to avoid using external for source maps and allow developers to provide any source maps configuration, because it is hard to say what is default good