Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

08. Simple CSS and Sass

Transcript

00:00

We're now going to take a look at a really simple style sheet example and including this within our bundle. Now normally within an app you could place your CSS file pretty much anywhere. Inside of Nuxt we're going to place this in an assets directory.

00:15

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

00:34

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.

00:48

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.

01:04

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.

01:18

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.

01:34

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.

01:48

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

02:06

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.

02:21

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.

02:38

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.

02:54

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.

03:20

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.

03:36

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.

Episode summary

In this episode, we dive into how to add basic CSS styling to your Nuxt app. We start by creating a simple app.css file inside the assets/styles directory and show you how to include it globally by importing it into your app.vue file. This is a great way to get your global styles set up without any hassle.

After verifying that our CSS file is working correctly, we take things up a notch by converting our stylesheet from plain CSS to SCSS (Sass). This process involves renaming the file, updating the import, and installing the necessary sass package. Nuxt detects the change and handles the pre-processing for you, as long as the dependency is installed.

Finally, we demonstrate how you can start writing Sass nested rules right away. We add a quick example with a class and sub-element to see how Sass nesting works in the Nuxt project. By the end of the video, you'll know how to use both regular CSS and Sass in your Nuxt app, and you'll see just how easy it is to get everything working together.

Episode discussion

No comments, yet. Be the first!