Webpack 4: Extract CSS from Javascript files with mini-css-extract-plugin

Since the release of Webpack 4, extract-text-webpack-plugin is completely broken. A lot of people are complaining about their builds failing after upgrading to Webpack 4. The future of this plugin is uncertain after contributors made it clear that they won’t be fixing problems with ETWP and CSS extraction support will be moved to MCEP plugin.

In this tutorial, we’ll see how to use MCEP plugin to extract CSS from Javascript files. Initialize a new package.json file with npm init and add these dependencies to it.

In this example, we’ll use sass-loader to transpile SASS to CSS and then extract it to a dedicated file.

We’re running babel-loader against Javascript files and css-loader and sass-loader for our SASS and SCSS files. Now let’s create a react component under src directory along with its style file and require it in your app.js entry file.

Now run yarn run dev from the terminal.  Webpack will create bundle.js and style.css under dist folder along with source map files.

I’ve set up an example repository, clone and play with it. For more configuration options, check MCEP repository.

Share this post

4 thoughts on “Webpack 4: Extract CSS from Javascript files with mini-css-extract-plugin”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.