How to use Sass in Nuxt 3

Nuxt 3 and Sass.

Installing Sass as dependency

Install Sass dependency in the Nuxt project, either using Yarn or NPM :

yarn add sass or npm i sass

Creating folder and file

Create a folder called scss inside the assets folder. Also while we here create a scss file and name it as main.scss:

Setup Sass in Nuxt config file

In nuxt.config.ts under css configuration, define the entry of the sass file which is the main.scss:

                                
                                        // nuxt.config.ts
// the style will be applied globally
export default defineNuxtConfig({
  css: ['@/assets/scss/main.scss']
});
                                    
                            

Tags: Nuxt