How to configure Webpack to not pull content of imported Sass files to a source map?

Question

I have a Sass file that imports Bootstrap and Font Awesome. They has been put on the of the file before my custom CSS class. Here is the code:

/src/scss/site.scss

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";

// Custom style sheet here
.my-custom-header{
    color:#F00
}

There is a source map after Webpack build but it includes the content of Bootstrap and font awesome.

Here what is look like in Browser:

When I tried to inspect a custom class it point to correct line number of origin source code but incorrect for generated source map because it has content of Bootstrap in the top.

My question is:

Is it possible to configure a output source map to keep the import statement and the content is exact the same as actual source code.

Here what source map I'm expected. site.css.map

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";

// Custom style sheet here
.my-custom-header{
    color:#F00
}

Here my Webpack configuration:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const siteFile = [__dirname, 'src', 'scss', 'site'];
const outputPath = [__dirname, 'public', 'css'];

module.exports = {
    entry: {
        site: path.resolve(...siteFile),
    },
    output: {
        path: path.resolve(...outputPath),
    },
    resolve: {
        // https://github.com/webpack/webpack-dev-server/issues/720#issuecomment-268470989
        extensions: ['.scss']
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader', // Translates CSS into CommonJS modules
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader', // Run post css actions
                        options: {
                            plugins: () => {
                                // post css plugins, can be exported to postcss.config.js
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            },
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'resolve-url-loader',
                    },
                    {
                        loader: 'sass-loader', // Compiles Sass to CSS, using node-sass by default
                        options: {
                            sourceMap: true
                        }
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff2?)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: '.' //relative to output
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './[name].css' // relative to output
        }),
    ],
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        compress: false,
        port: 8080,
    }
};

Here is a link to a repository of the example code.

codesanook-examples-webpack

Thank you.

Answer 1

Have you tried SourceMapDevToolPlugin? https://webpack.js.org/plugins/source-map-dev-tool-plugin/

You might need to create a vendor bundle for node modules stuff then you can ignore it from sourcemap.