Invalid sourcemaps for sass when adding IconfontWebpackPlugin

[AliekseiDev]

Expected Behavior

Plugin does not affect sass sourcemaps

Actual Behavior

Breaks sass sourcemaps

Steps to Reproduce the Problem

Sass sourcemap without IconfontWebpackPlugin

1. clone config-example
2. npm i
3. npm start

4. open index.html from dist folder and inspect div.hello and span.icon

   Sass sourcemap with IconfontWebpackPlugin

5. uncomment line 35 in webpack.config.js
6. uncomment lines 3-7 in hello-icon.scss
7. npm start

8. open index.html from dist folder and inspect div.hello and span.icon

   The sources with IconfontWebpackPlugin are messed

Example Link

• Link: config-example

[jantimon]

Wow cool thanks for the information 👍

I will take a look.

The sourcemaps are generated by postcss and usually that works well

[jantimon]

Can you do me a favour and try if this works:

1. Remove all scss & css & iconfont loader settings
2. npm i --save-dev scss-config-webpack-plugin
3. Add the following to your webpack config:

const ScssConfigWebpackPlugin = require('scss-config-webpack-plugin');

module.exports = {
  plugins: [
    // SCSS Configuration for .css .module.css and .scss .module.scss files
    // see https://github.com/namics/webpack-config-plugins/tree/master/packages/scss-config-webpack-plugin/config
    new ScssConfigWebpackPlugin(),
  ],
};

Try if sourcemaps work as expected

[jantimon]

If it works you can use the plugin or its underlying config like this:

https://github.com/namics/webpack-config-plugins/blob/6bf7421bf492dba2d1b62e1889c3970c2f48b4bf/packages/scss-config-webpack-plugin/config/development.config.js#L12-L53