Hot Module Replacement of css with React+Redux SPA template #223

New Issue

fergalmoran · 2025-08-09T17:15:28Z

fergalmoran commented

2025-08-09 17:15:28 +00:00

Originally created by @AleksandrAlbert on 1/17/2018

I am posting this as a solution for those who may be looking in the future. I was using the React+Redux SPA template and realised it didn't Hot Reload the css files. I looked around for a bit before finding an answer, the issue is that ExtractTextPlugin does not allow for HMR. To fix this, we have to disable it during development. I edited my webpack.config.js as follows:

const clientBundleConfig = merge(sharedConfig(), {
        ...
        module: {
            rules: [
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) }                
            ]
        },
        ...
        plugins: [            
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new ExtractTextPlugin('site.css'),
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

Hope this helps

*Originally created by @AleksandrAlbert on 1/17/2018* I am posting this as a solution for those who may be looking in the future. I was using the React+Redux SPA template and realised it didn't Hot Reload the css files. I looked around for a bit before finding an answer, the issue is that ExtractTextPlugin does not allow for HMR. To fix this, we have to disable it during development. I edited my webpack.config.js as follows: ``` const clientBundleConfig = merge(sharedConfig(), { ... module: { rules: [ { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) } ] }, ... plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./wwwroot/dist/vendor-manifest.json') }) ].concat(isDevBuild ? [ // Plugins that apply in development builds only new webpack.SourceMapDevToolPlugin({ filename: '[file].map', // Remove this line if you prefer inline source maps moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk }) ] : [ // Plugins that apply in production builds only new ExtractTextPlugin('site.css'), new webpack.optimize.UglifyJsPlugin() ]) }); ``` Hope this helps

fergalmoran closed this issue

2025-08-09 17:15:28 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#223