Using CSS with Webpack

[00:00:02]
>> Sean Larkin: Let's take a scenario, I think actually a really great scenario is that when we were working in button styles, right? It would be way more manageable if this was just like CSS, right, at least I think so.
>> Sean Larkin: Or why don't we load up our dev build?

[00:00:21]
So npm run dev, or your dev.
>> Sean Larkin: And so we have our dev server running, and I'll just put the browsers side by side again. No Java, there we go. Let's see, okay. Here we go, let's clear our log. Awesome. So we wanna be able to have a more holistic style sheet.

[00:00:57]
Let's say we wanna take a footer, and we actually wanna give it some real styles. So you would think that maybe the kind of typical approach should be to actually create a CSS file like footer.css, and we could just write some styles for it. So we know that this is a footer element, and it has two divs inside of it.

[00:01:16]
Maybe we can just make it something a little bit nicer looking. So footer element, and I don't know. Let's say, now my CSS skill, you think just my general JavaScript APIs or damn APIs. This is a little bit of a struggle. So let's see, I'll try my best here.

[00:01:40]
100px and width is just a, I wonder if it even respects 100%. I'm sure there's something I'm forgetting. Now, just in case, I always love the classic background red, or we'll just do background yellow. Yellow-green looks nice, okay. And that way, we know when we actually include the CSS file into our build, that we're seeing our background correctly.

[00:02:14]
Now, the traditional way of doing this is by just serving it in a disk folder and referencing in a style tag. But if we change this and it's affecting our code, we would want to have it tied in with our build like an incremental rebuild. Or, wouldn't it be cool if you could have it changed without even reloading?

[00:02:31]
That would be incredible. So, what we could do is we can actually jump into the footer module. And even though we're not gonna apply anything that we import, we can actually take and say import footer.css. Now, you may say, Shawn, this is a side effect. I thought you said, don't do side effect the imports.

[00:03:00]
When it comes to things like CSS, you can get away with it. You may actually be more familiar with using CSS with CSS modules or with React. This is just the more vanilla approach to show you the capabilities, the why, and how. And so, of course, if we look at our build though now, we're gonna see a fail.

[00:03:23]
It says, you need an appropriate loader to handle this file, cuz webpack can't parse this standalone. Luckily, we've installed the dependencies that we need. And why don't we jump back into our configuration now?
>> Sean Larkin: Now, instead of adding it into our kind of our common config here, or kind of the base, we can just jump into our build utils and go to development.

[00:03:52]
And now, we have a really nice, isolated way of adding this. So we could say module, and then we're gonna add a new rule set, right? And we're gonna say, so the two base properties, remember the two minimum properties are test and use. So basically, how we wanna match this file and how we wanna transform it.

[00:04:19]
So test is always gonna be, by default, or at least the most common way that you'll see it being used is a regular expression. And so we can just say, when we come across a CSS file,
>> Sean Larkin: Then we want to apply a loader to it. Now, in this case, the CSS loader stand alone, if we just used that, we can try it.

[00:04:46]
Let's just see what happens. CSS loader,
>> Sean Larkin: Oops, no, no semicolon.
>> [INAUDIBLE]
>> Sean Larkin: Yeah, sorry. Thank you very much. How's that?
>> Sean Larkin: Okay, so if you just add CSS loader and we run it, let's see what happens when you're in dev.
>> Sean Larkin: We get nothing. It is still transforming it though.

[00:05:19]
We don't see an error anymore. What I think is cool, if we go back to our photo.js, what happens if we did just like, let's see. If we say import css from footer.css, and we console logged it. I love this, because then we can see what the value is, right?

[00:05:42]
Technically, it must be something that's JavaScript maybe. So if we console log it, look what we see here.
>> Sean Larkin: We see just an array of those styles with some metadata. Here's some metadata, and then here's the string version. And looks like there's some other features, if you wanted to use CSS modules.

[00:06:07]
But, in this case, we're not, so we just get the raw source in a string. I mean, technically, you could leverage this if you wanna do stand alone, but it's not very practical, right? So,
>> Sean Larkin: Instead, what we would do, I'm just gonna change this back to import.

[00:06:24]
So why don't we jump back into our development and config it? So this is what style loader actually does for us, it's that it adds the script tag in the browser. It consumes that array that css loader passes to it.
>> Sean Larkin: Oops, accidentally zooming.
>> Sean Larkin: So why don't we go ahead now and reload again?

[00:06:50]
So any time you make changes to your config, you do have to do a reload. We'll jump in the dev server.
>> Sean Larkin: Let's see what happens.
>> Sean Larkin: Oops, I forgot to remove that console, we don't have to rebuild. Hey, there we go. We just applied the CSS to the selectors that it matched against.

[00:07:19]
So, what's really awesome about this is jump back into your footer.css, and you can go ahead make whatever stylistic changes you want. I might do something like border solid black.
>> Sean Larkin: And boom, there you go.