1. 16
    Automatically Import CSS in JavaScript with webpack using style-loader and css-loader
    3m 25s

Automatically Import CSS in JavaScript with webpack using style-loader and css-loader

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

David  Villanueva
David Villanueva
~ 3 years ago

could be pretty helpful the implementation of CSS modules in this section.

Ahmed Soliman
Ahmed Soliman
~ 3 years ago

could be pretty helpful the implementation of CSS modules in this section. On point.

Denis OSullivan
Denis OSullivan
~ 7 months ago

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",