Learn

Let’s add CSS stylesheets into our Webpack project.

The test configuration option for CSS follows the same structure as the .txt file rule:

test: /\.css$/i

While we import .txt files as assets, other file types often need loaders to get bundled by Webpack. Instead of a type attribute, files that use one or several loaders require a use attribute.

CSS files use two loaders, css-loader and style-loader.css-loader takes the CSS out of a .css file and adds it to the JavaScript code. style-loader takes the output of css-loader and puts it in a style tag in the HTML. We need both loaders and to apply css-loader first. We specify multiple loaders with an array, and Webpack applies them in reverse order.

The rule for CSS files looks like:

{ test: /\.css$/i, use: ['style-loader','css-loader'] }

We can add this rule anywhere within our rules array.

In a local environment, we’d also install the loaders as developer dependencies.

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

We can then import CSS files directly into our JavaScript using another form of the import statement:

import './style.css'; import Text from './example.txt'; document.querySelector('h1').innerHTML = Text;

When we build and start our preview server, the CSS is applied to the HTML!

Let’s practice using CSS in our Webpack project!

Instructions

1.

Get started by defining the rule for .css files in webpack.config.js.

Note that the necessary loaders have been installed for this project.

2.

We’ve added some CSS code to the project inside of styles.css. Feel free to check it out!

Inside of index.js, import the CSS file.

Don’t forget the ./!

3.

We are ready to see the styles applied to our project!

First, run the build command in one terminal.

4.

In a different terminal, run the start command, then refresh the preview on the right.

Our app should now be displaying with styles! Feel free to make edits to the CSS and watch the site live reload!

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?