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
Get started by defining the rule for .css files in webpack.config.js.
Note that the necessary loaders have been installed for this project.
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 ./
!
We are ready to see the styles applied to our project!
First, run the build
command in one terminal.
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!