Sign up to access "Getting Started with Nuxt 3" right now.

I've gone ahead and brought up the documentation for this. You can see here the assets directory is used to add all of the website assets which will be processed by the build tool, webpack or vite. So this contains things like style sheets, fonts or images that won't be served publicly

by the public directory. So things that will be bundled in with your app like SVGs for example. So inside of assets we're going to go ahead and create another folder in here called styles and then inside of that we're going to create app.css.

We'll look at a really simple example of just setting the background colour to a grey colour and we're going to include this in our app and see if this takes effect. Let's actually change this to black just so we can see the difference. Okay so at the moment nothing's happened.

Nuxt won't automatically pick this up for you. What you're going to have to do is load it into your app somehow. We know that app.view is at the kind of entry point to our app. So for very simple styling this is a good place to pull this in.

Let's go ahead and create out a script section in here and again we're going to go ahead and make this use script setup and all we really need to do at this point is just go ahead and import that CSS file. So we're going to go into assets, into styles and put in app.css.

Let's go back over and you can see that that has automatically been built into our app and is now taking effect. So we can write any styles we want inside of here and they will be available globally through our app.

Let's go and change this to a more suitable color for what we're building, a lighter gray and let's take a look at what happens if we wanted to bundle sass or scss. Well let's go ahead and just rename this file. So I'm going to go ahead and rename this to .scss

and let's see what happens when we try and build this. Let's go ahead and rename that import in app.view to scss and let's go over and give this a refresh. Okay so we've got a pre-processor dependency sass not found.

What Nuxt is trying to do is automatically use sass with the scss extension to bundle this for us but of course this doesn't exist or in fact sass isn't installed. Let's go ahead and do an npm install on sass and we can save that as a development dependency or just pull it in.

It doesn't matter in this case and let's go back and see the difference. Okay of course we need to run npm run dev again. Let's go back and give this a refresh. Okay so we get exactly the same result but now what we're doing is we're pre-processing this.

So if we come over to app.css we can technically now write sass inside of this style sheet. So for example let's go ahead and say element and let's say sub element and let's go ahead and set the color of this to red. So let's go over to index and just create out an element which uses this style.

In fact we could do that in greeting. So let's give this a class of element and then inside of here let's create out a sub element just as a really simple example sub element. Okay let's try this out give that a refresh and there we go.

We didn't even need to refresh and that has turned red. So if you did want to write sass you can go ahead and just rename the extension. Make sure that you have the sass dependency pulled in and Nuxt will take care of compiling that and bundling it for you.