If you happen to have a custom Webpack setup, you may be wondering how to set up CSS with Webpack. This short tutorial walks you through the process. First of all, you need to install a CSS loader and a style loader to your dev dependencies:
And second, you can use both loaders for all CSS files in your Webpack configuration:
Then in a new src/style.css file, add some CSS to it:
And in your src/index.js file, or any other JS file, import this new CSS file:
Thatâs it. From here you can use CSS in your JavaScript project which is powered by Webpack.
If you happen to have a Webpack configuration for development and production , you will need a different configuration for production when using CSS.
First, install the MiniCssExtractPlugin for Webpack to your dev dependencies:
And second, use it in your Webpackâs production configuration instead of style loader and additionally as a plugin:
Thatâs it. Once you build your project with Webpack, you will see the style files showing up in your dist/ folder.