Automatically Import CSS in JavaScript with webpack using style-loader and css-loader
JavaScript files aren't the only type of asset that 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:45] It doesn't like the CSS syntax. It'll tell us right here, "You may need an appropriate loader to handle this file type." If we look at our webpack config, we'll see that we have a loader set up for JavaScript files that runs our JavaScript through Babel.
[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:40] Then in the JavaScript section, we're using loader here for Babel loader. We could use that again here, but we're going to have two loaders. There's an alternate syntax, where we can either pass this an array, or we can call it loaders plural.
[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.
[03:05] I'll switch back. It'll do the live reload, and we should get a very bright background. It's working. We'll take that out, because we don't want to leave that in. Now, we're successfully able to import CSS directly through our JavaScript, and have it automatically inject it into our app at runtime.