This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Loading CSS" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kent C Dodds: Next is CSS, and remember they're they're just modules. So actually we're going to be requiring CSS files in our project. But before we do that, I just want to kind of explain what these loaders that we're gonna use, what their purpose is. So lets say that we have some CSS that looks like this.
[00:00:21] All that really needs to happen for the CSS to be applied to our page, is it needs to get into either a style tag or a link tag with a href. And so, the way that the default for like most applications, the default way that people do this with web pack, is first they pass it through the CSS loader.
[00:00:42] And that's going to read the file and create a string out of it. It does a couple extra things as well, because CSS, what are some of the dependencies that a CSS file could have? That you can think of, like other assets, yeah?
>> Speaker 2: URLs.
>> Kent C Dodds: URLs to like images?
[00:01:01]
>> Speaker 2: Like fonts and images, yeah.
>> Kent C Dodds: Yeah, so CSS does have dependencies, and they're explicit, right? Like you're explicitly saying, this is the URL to the thing that I need. And so the CSS loader will resolve some of those dependencies as well, for a web PAC. And, so well yeah, the CSS loader creates a JavaScript module.
[00:01:21] So, the results of the CSS loader is a module.exports equals, and then this object that represents the CSS, and it has the actual CSS itself as a string. And then it updates all of the places with images and stuff, and updates those URLs based off of where those files will live when the bundle is all done.
[00:01:44] So you don't have to worry about that. You can say url relative-path, and you don't have to worry about where that's going, like .png. And web PAC will manage moving that file to where it needs to be, and updating that URL so that it's it's correct, when you launch your application.
[00:02:04] And so, now with this JavaScript module, that's not very useful. I can now, sure you have a JavaScript module that’s great. But it's not in a style tag or in a link tag, so it's not gonna apply to the page. So, the next thing that you use is the Style Loader, and that's responsible for taking that JavaScript module, the CSS from that module, creating a style tag, and injecting that into the dominant runtime.
[00:02:27] And yeah, that happens at runtime. So are there any questions about how the CSS loader and style loader are used to create mantras out of CSS, and have them apply to your page?
>> Speaker 2: So if you were using something like LESS or SAS, it would take the CSS that that computed.
[00:02:49]
>> Kent C Dodds: Yeah, so you would stick it right in here.
>> Speaker 2: Between, okay.
>> Kent C Dodds: So yeah, CSS, Sylus, SAS. And the cool thing about it is because, as you saw with Babel, it was just one line of configuration to get Babel for all of your JavaScript files. Same thing goes for CSS, and yeah, I'll show you how to do that.
[00:03:12] But the cool thing is, I have a project that I had before that was using LESS. And I'm not huge fan of LESS, I like Stylus. And so, I just added Stylus to the project. It took literally five minutes, and most of that time was spent waiting for NPM install.
[00:03:28] So, you just add another line and you say anything that ends in Style, is gonna be loaded through the Stylus loader. And then the CSS loader and the Style loader. And then later on, I decided you know what, SAS would be kind of cool. And I just, I would not recommend doing this.
[00:03:44] But it was it was really easy to do. And I would say it's not necessarily a terrible idea. You just can't use mix ins between them and stuff, which would be a bit of a pain. But yeah it's totally possible. For example, Stylus has a really great story for looping over stuff, so it was really good for a ton, like CSS kind of things.
[00:04:04] Looping over LESS is a pain in the rear. But these days, I actually use CSS and JS, you can talk to me about that after. But,