Webpack Loaders, CSS and Style Loaders

Let’s see how to get our styles - css and sass files - bundled in our webpack application package.

Loaders

Webpack by itself only knows javascript, so when we want it to pack any other type of resources like .css or .scss or .ts, webpack needs help in order to compile and bundle those non-javascript types of resources.

Loaders are the node-based utilities built for webpack to help webpack to compile and/or transform a given type of resource that can be bundled as a javascript module.

css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string.

And then style-loader would take the output string generated by the above css-loader and put it inside the <style> tags in the index.html file.

So, lets start by first installing the two loaders.

$ npm install css-loader style-loader --save-dev

Adding a .css file

1. Under the src folder, create a sub-folder - styles. In src/styles, create a file app.css with below content:

2. Update the template index.html to add a div to validate the above css is working:

Above, we added a <div> tag in our ./src/index.html template file, and with the style defined for div tag in the app.css file, we would expect this div to have a background-color:#99cc00 (green)

3. Next, in order for webpack to process, compile and bundle css code, we would have to setup css-loader and style-loader in webpack.config.js.

In the webpack.config.js, add a rule to use ‘css-loader’ and ‘style-loader’ for .css files.
The rules are configured in module property in webpack.config.js as below:

Lets go through what we just did above in webpack.config.js.

Line#8–15: We added a module key to our webpack config object assigning it an object with rules property, which is an array of some rules for configuring the loaders we want to use with webpack.

Currently, the only rule we have has test:/\.css$/ and ‘style-loader’, ‘css-loader’ in its ‘use’ array (line # 11–12)
What this means is for any file that has filename matching with the regular expression specified in the testproperty, first use ‘css-loader’ to compile those and then use ‘style-loader’ on the output of css-loader. Note, the order in which webpack applies loaders on the matching resources is from last to first.’

4. Now that we have css-loader and style-loader added to webpack.config, it will work on any css that it finds in the dependency tree when it starts building the package starting from the entry file.

Although we added the css file and also the css-loader in webpack.config, the css in the file won’t be bundled by the webpack in the application package(app.bundle.js) because we haven’t yet included the css file anywhere in our module dependency tree.

For the webpack to know that the app.css is our dependency, we need to import the file in our dependency tree. Lets import it in app.js, as below:

Notice in Line # 4 above we imported app.css, to have it considered as a module dependency by webpack.

5. Rerun the npm start command for webpack to use the newly added rules for loaders:

$ npm start

6. And now if we refresh our application on the browser (localhost:9000), we should see the code from app.css getting embedded inside a <style> tag in index.html and the new div we added to the index.html should have the style applied to it.

Next, we will see how to have SASS files compiled and bundled by Webpack using sass-loader.

[Prev: Hot Module Replacement] [ Next: Using SASS ]