Sourcemap to original SCSS file

Question

I'm using Webpack 4 with the plugins MiniCssExtractPlugin and OptimizeCSSAssetsPlugin to extract SCSS files and minify the main.css file in production. I have source mapping enabled in my config file like so:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    devtool: "source-map",
    entry: {
        style: './src/scss/main.scss'
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                 test: /\.css$/,
                 use: [
                     MiniCssExtractPlugin.loader,
                     { loader: 'css-loader', options: { url: false, sourceMap: true } }
                 ]
             },      
             {
                 test: /\.scss$/,
                 use: [
                     'style-loader',
                     MiniCssExtractPlugin.loader,
                     { 
                         loader: 'css-loader', 
                         options: { 
                             url: false, sourceMap: true 
                         } 
                     },
                     { 
                         loader: 'sass-loader', 
                         options: { 
                             sourceMap: true 
                         } 
                     }
                 ]
             }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            sourceMap: true,
            filename: "main.css"
        }),
        new UglifyJsPlugin({
            sourceMap: true,
            test: /\.js($|\?)/i,
        }),
        new OptimizeCSSAssetsPlugin({
            cssProcessorOptions: {
                map: {
                    inline: true
                }
            }
        }) ,
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })    
    ]
}

In the console, it does give the line where a CSS rules originates from, but in the bundled main.css file, rather than invididual scss files ie _layout.scss , _buttons.scss .

Question

What configuration do I add in order to display where the CSS rule originates from, rather then where it is located in the bundled main.css file?

Answer 1

As i can see on your sass-loader configuration, you're already getting the source maps for yous scss files (to verify that you need to have a file with the same name as you css, but with a .map on its name), so the only thing you will need is to peroperly configure your browser to load and use the source maps. This example uses Google Chrome:

1. Open dev tools
2. Click the gear icon or three dots to open settings (top right corner)
3. Under General (or Preferences), look for the “Sources” section. In that section, select “Enable CSS source maps”.
4. Make sure the accompanying “Auto-reload generated CSS” is also enabled (if available). This last step helps to reload the CSS when it changes. Think of it like a live reload feature for the CSS alone.
5. Navigate to your localhost server, inspect any element on your page.
6. In the developer tools, choose the Sources tab.
7. In the file tree on the left hand side, right-click your stylesheet and select “Map to file system resource…”. This will bring up the file search dialog. Select the appropriate file (your stylesheet). In some newer versions of Chrome, the file should be loaded automatically using the /*# sourceMappingURL=style.css.map */ reference
8. Restart the developer tools.

That should work. Let me know. Otherwise i will fine tune the quick tutorial.