Now, one of the great things about Webpack is that we can teach it how to process or transform basically any kind of file. Imagine if you want to include your CSS as part of your compile, okay? Well, you might want to say, I want to require in my main CSS. Okay, well, that's interesting. We've never required a stylesheet before. We've only ever required JavaScript or JSON or something like that. So hmm, okay, let's try this out. We're going to create the file, and we'll just say body should have a background color of red.

We're going to create the file, and we'll just say body should have a background color of red. Okay, well, right now, if we were to run this, npm run build, it's going to fail, right? And that's because Webpack is coming across this CSS, and it doesn't know what to do with it. So it's going to squawk at you. And it's going to say, hey, unexpected token here. I didn't know what any of this junk was. You might need an appropriate loader to handle this file type. So loaders teach Webpack or introduce the functionality to transform any kind of file.

You might need an appropriate loader to handle this file type. So loaders teach Webpack or introduce the functionality to transform any kind of file type that it is optimized for. So in our case, we want a CSS loader. Let's try it out. We're going to pull it in through npm. All right, and next, we will update our webpack.config.js file. So we can reference our loader rules like so. So generally, it'll take the form of this. You're going to have some kind of test, and this will be a regular expression.

So generally, it'll take the form of this. You're going to have some kind of test, and this will be a regular expression. It's our way of saying, well, what file type should this be applied to? So why don't we just say anything that ends in .css? So any CSS files. OK, next, which loaders are we going to use? We could give it a string or an array if we're going to have multiple loaders that we want to build on top of one another. Now in our case, a string is fine. So that's it.

Now in our case, a string is fine. So that's it. We've extended our webpack.config.js file. We've added a rules array that contains exactly one section to reference the css-loader to transform any style sheets that webpack comes across. So now, let's give it another shot. We run it, and now it compiles down. Once again, without it, it's going to fail because it doesn't know how to interact with style sheets. But if you add it, run it again, now it does.

style sheets. But if you add it, run it again, now it does. So the CSS loader gives us the ability to read style sheets. It will dynamically update any CSS imports or CSS URL fields, and we'll talk about that more very soon. But beyond that, it doesn't necessarily do anything. So here's what I mean. Let's open up our webpack-learning.dev project. And if I view the source, you'll remember that we are importing bundled.js. And in fact, if we look for read, yep, it was transformed.

And if I view the source, you'll remember that we are importing bundled.js. And in fact, if we look for read, yep, it was transformed. However, like you can see here, it's not being referenced anywhere. So we're not doing anything with it other than, like I said, allowing webpack to read it and compile it, and then also it will do a number of things. But very notably, it can update your imports and URLs. Okay, so how do we do something with this? For example, what if we just want to apply it? Well, we can use the style-loader for that. Once again, the exact same process.

Well, we can use the style-loader for that. Once again, the exact same process. style-loader. And now what this will do is it'll take any CSS from your webpack build and physically inject it into the page. And this can be pretty useful for smaller projects. So how do I say, well, for CSS files, I want to use css-loader, but then after that, I want to use the style-loader? Well, now we can switch over to an array like this. Now a quick note here, it will take effect from right to left.