Sourcemaps with Webpack CSS-Loader

Sourcemaps with webpack css-loader

1. Enable source-maps via webpack

   ...
   devtool: 'source-map'
   ...
   

2. You might want to enable source-maps for Sass-Files as well

   module: {
     loaders: [
       ...
       {
         test: /\.scss$/,
         loaders: [
           'style-loader',
           'css-loader?sourceMap',
           'sass-loader?sourceMap'
         ]
       }, {
         test: /\.css$/,
         loaders: [
           "style-loader",
           "css-loader?sourceMap"
         ]
       },
       ...
     ]
   }
   

3. Use extract text plugin to extract your css into a file.

   ...
   plugins: [
     ...
     new ExtractTextPlugin('file.css')
   ]
   ...
   

sourceMap with sass-loader and postcss-loader in Webpack

You can give the following a try. This is what I'm using and it's working.

{
    test: /\.(sa|sc|c)ss$/,
    exclude: ['/node_modules', './dist', '/src/js', '/docs'],
    use: [
        MiniCSSExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                sourceMap: true,
                minimize: process.env.NODE_ENV === 'production',
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                sourceMap: true,
                syntax: postCssScss,
                plugins: () => [
                    autoprefixer,
                    postCssPresetEnv({
                        stage: 0,
                        features: {
                            'color-mod-function': true,
                            'alpha-hex-colors': true
                        }
                    }),
                ],
            },
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true
            }
        }
    ]
}

The extractTextPlugin has been deprecated for Webpack4 in favor of miniCssExtractPlugin

Related Topics