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.