webpack can bundle. In this lesson, we'll add a CSS file to our boilerplate and then install and configure the appropriate loaders in
webpack to handle the CSS that's imported into our project.
Instructor: [00:00] I've added some basic reset rules in this styles.css file. I'd like to include that in the app by default. I'm going to come into the index.js file, I'm going to add an import for this CSS, and see what happens.
[00:13] I'm just going to import relative path to styles.css. Then in the terminal, I'm going to npm run dev. Let's make sure we save the file before we run that, npm run dev. It's going to struggle to start our app. If I switch back to the terminal, and we scroll up, we're going to find an error in sourceStyles.css, line one.
[00:59] We need to do something similar for CSS. I'm going to hit Control+C in the terminal to clear that out. We'll start with an npm i -d, because we want to save these as dev dependencies. We're going to install two loaders, the CSS loader and the style loader.
[01:21] With those installed, we can come up into our webpack config base, and we can add another rule. We're going to add another object to our rules array. It's going to have a test. We'll give it a regular expression that tells it to test for CSS extensions.
[01:56] This is deprecated, and the option we're supposed to use now is use. Use is going to take an array of loaders. We're going to pass it style loader and CSS loader. That needs to be a string. Then we're going to exclude Node modules.
[02:22] CSS loader is going to let webpack handle the CSS syntax, and then style loader is actually going to take that inject CSS and inject a style tag into our HTML at runtime. Let's save this file, and then we're going to do an npm run dev, and we'll see if it works.
[02:46] We'll see that our application loads up, and our styles that slightly different than they were before. Let's make it really obvious. I'm going to come into styles.css, and I'm just going to make our background color something really obvious.
could be pretty helpful the implementation of CSS modules in this section.
could be pretty helpful the implementation of CSS modules in this section. On point.
the latest css and style loaders won't work with webpack 4, so I used the following versions which do work with webpack v4.25.1 "css-loader": "^3.6.0", "style-loader": "^1.3.0",