How to compile the CSS with Webpack. Step by step process since installing Webpack 5, because some things changed from the previous version. We’ll explain webpack.config.js settings for compiling CSS for development and production.
In this article we are going to explain how you should compile the CSS of a frontend project with Webpack 5. We will explain the process step by step, from the installation of Webpack. However, we are going to see the first steps only as a recipe, so if you have any questions or want more information, we recommend that you consult the .
In a previously published article we explained how, however things in Webpack 5 have changed a bit and now there are other packages to consider.
If you only need to compile CSS code in your project and don’t need to deal with Javascript we suggest you to find out about another specific solution for style sheets such as .
1.- Install Webpack 5
We start with the installation of Webpack in your project. You get it with these commands:
npm init -y
You will only need this first step if you do not already have the package.json file. If you are already installing dependencies via or if you are relying on some development framework, you will surely already have the package.json and you will not need it
And then you install Webpack:
npm install webpack webpack-cli –save-dev
This step we You will have installed Webpack itself and the Webpack CLI which are in separate packages.
The CLI are the command line tools to be able to launch the Webpack processes from the terminal.
2.- Create the webpack.config.js file
The webpack.config.js file directs how the files should be compiled using Webpack. You must create it in the root of your project, in the same folder where you have the package.json.
In this step we are simply going to create the file, then we indicate the code that you are going to need.
If you want to create this file with the terminal you can execute the command:
touch webpack.config.js
3.- Install the loaders for CSS
Webpack loaders are what do the job of recognizing the code you are using in your project. To recognize css code Webpack needs certain loaders.
In this case we are going to install all the loaders to work with your CSS code. You install them all with the following command:
npm install –save-dev mini-css-extract-plugin css-loader style-loader
If you use preprocessors you will need loaders other than the ones just listed. We will see them in the next article.
4.- Create the source files for the compilation
Now we are going to create the source files, which Webpack will take to compile the CSS. We are going to put these files in the “src” folder. This is common practice, although you might prefer another directory structure. You will simply have to configure it in your webpack.config.js.
We’ll start with the CSS file. We will put it in the path: src/styles.css.
You can put all the CSS code you want, for example:
body { background-color: #eee; font-family: sans-serif; }
Now we will create a Javascript file. Although it seems strange to make a Javascript to compile CSSWebpack needs it because it is a software designed to transpile Javascript. Every process in Webpack starts by recognizing a Javascript file.
We will put the js file in the path: src/index.js. The code will be something like the following.
console.log(‘Compiling CSS with Webpack 5’); import ‘./style.css’;
As you can see, we start with a console.log(). You can remove that, it’s just to have some Javascript. Then we have what we really need, which is the CSS import.
Although doing an import of CSS code may seem like an aberration, the Webpack CSS loader will know how to deal with it and the mini-css-extract-plugin package will take care of extracting the CSS code from the compiled Javascript.
Optionally create other CSS files
You can also create other CSS files if you want and import them from your main CSS.
For example, we can have this file structure:
In this case we are placing a file called “other.css”, which we will have to import from the style.css file.
body { background-color: #eee; font-family: sans-serif; } @import “./other.css”;
The good thing about having the files separated is that you can put the CSS of each part of your website separately, which will greatly improve the maintainability of the code.
5.- Code in the webpack.config.js
Now we are going to see the most complex part, which is the code that we need in the webpack.config.js file. We are going to list everything at once and then explain the most relevant details.
const path = require(“path”); const MiniCssExtractPlugin = require(“mini-css-extract-plugin”); module.exports = { entry: “./src/index.js”, output: { filename: “main.js”, path: path.resolve(__dirname, “dist”), }, module: { rules: , } , ], }, plugins: , };
- We make the requirements of the things we need
- We set the entry point “entry” with the path of the Javascript file that is started for the build.
- We configure the starting point with the name we want and the route also of our preference. In this case we have said that the output will be placed in the “dist” folder and the file will be called “main.js”. Given this exit point, the compiled CSS will also be called “main”, specifically “main.css”.
- Then we load the loaders. In the “test” configuration we indicate the regular expression of the files that will be taken into account as CSS code. Then in “use” we indicate the loader.
- We also need to instantiate the mini-css-extract-plugin in the “plugins” section.
The configuration of the loaders that we have indicated:
use: ,
It is designed to carry the files to productionas separates the CSS from the Javascript.
There is another possible configuration that you will surely see on the Internet that consists of using the loader “style-loader”, which we have also installed, with which your CSS will be embedded within the Javascript. That configuration is more indicated for the stage of development.
use: ,
In that case you won’t need to load the “mini-css-extract-plugin”. You will see simply when the Javascript is compiled, the CSS is not generated, because we are not extracting it.
6.- Scripts for compilation
Finally we are going to create the build scripts that call Webpack, creating both the development and production bundles.
These scripts are placed in the package.json file. When the package.json is created, you will see that they already included a script called “test” that you can delete and simply leave the following.
“scripts”: { “build”: “webpack –mode=production”, “dev”: “webpack –mode=development” },
To compile in development you can run the command:
npm run dev
To compile for production the command will be the following:
npm run build
Additionally, you can create a third command with the –watch option that will produce a continuous build, that is, every time the source files change, the build process will be rerun.
Your scripts would look like this:
“scripts”: { “build”: “webpack –mode=production”, “dev”: “webpack –mode=development”, “watch”: “webpack –mode=development –watch” },
You will call the process with watch with the command:
npm runwatch
It is done! with this we have learned to compile the CSS with Webpack 5. From now on you can also learn to compile files with preprocessors like Sass.
Facebook Comments
Disqus