But in general, it's going to take the form of something like this. We want to test. And we basically want to say, well, find all .scss files, and I want to compile them. So you might look for something like this. Look for any file type that ends in .scss. But also, there's a Sass file type. So why don't we just do this? We'll use a character. What is that called with regular expressions? A character set?

But I happen to know, here's how we pull it in. And so that will take care of the Webpack process. But we also want the Node Sass compiler that actually does the work. OK, so if we switch back, well, we're almost there. But this is going to compile Sass to CSS, but nothing else. So let me give you an example. We're going to go to source. And within main.js, we'll delete that. And we're just going to require a Sass file. And remember, that's what loaders do.

We'll just add a variable here to prove that it's working. OK, so yeah, if we were to try this out, I bet it's still going to fail. And it does. So we scroll up, and we get this dreaded error. Unexpected token. So this means Webpack encountered something that it doesn't know how to parse. And that would make sense, right? Because take a look right here. This is actually what the file contents are. But what Webpack is seeing is the compiled form.

And we learned that in a couple episodes ago, where we opened up the head tag in Chrome DevTools. And we saw the CSS was injected there. OK, so we're going to give this one more run. And now, once again, if we go back to index.html, we are importing that script. So let's just load this in the browser. And sure enough, we get red. Let's make sure it's working. Let's come back. Change it to green. Compile that down.

Change it to green. Compile that down. Back to Chrome. Refresh. And yes, it is working exactly the way we want. But now, we are compiling Sass as part of our build.