Search code examples
csswebpackwebpack-style-loader

Improve CSS debugging experience in WebPack

I have recently moved to WebPack (v3) from a Gulp based build system, and for the most part its pretty good. I am however struggling to get the CSS development experience to match what I previously had.

I write my CSS using SASS and then use the following setup in WebPack

Module.Rules:

{
    test: /\.(s*)css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            {
                loader: 'css-loader',
                options: { minimize: isProd }
            },
            {
                loader: "postcss-loader"
            },
            {
                loader: 'sass-loader'
            }
        ],
    })
},

Plugins:

new ExtractTextPlugin({
    filename: 'app.bundle.css',
    disable: !isProd
}),

So when I am in develpoment i.e. !isProd the ExtractTestPlugin is disabled and it uses the fallback of style-loader. This allows Hot CSS replacement. Without this the entire page would have to be refreshed to show CSS updates.

This all works great, I change CSS and a split second later its shown on screen, however, trying to debug what file or rule a CSS selector is in is proving problematic.

enter image description here

In this case I want to see what style is causing the font-size to be 1.5rem. I dont believe it to be in my CSS (I think its a third party library) but its nigh on impossible for me to find out the cause (I have ~50 inline styles added) and clicking the style tag link (which would previously take me to the CSS file with correct line number) now just takes me to the start of the <style> tag.

How can I improve this experience? I'd be happy with a single app.bundle.css file that is linked normally (not inline - so I get line numbers) but I really want to keep HMR for CSS.

Solution

  • It turns out that by adding source maps it effectively masks the delivery method (style tags) and gives the browser direct links to the source code which works correctly.

    See this github post for some information.

    Here is my final CSS WebPack code

    {
    test: /\.(s*)css$/,
    exclude: /node_modules/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            {
                loader: 'css-loader',
                options: { minimize: isProd, sourceMap: true }
            },
            {
                loader: "postcss-loader",
                options: { sourceMap: true }
            },
            {
                loader: 'sass-loader',
                options: { sourceMap: true }
            }
        ],
    })
},