Nuxt 3 with sass

Question

How can we use NUXT3 with sass, also please share the documentation.

I tried to add sass into nuxt3 project, but the vite looks like no options to load scss

Maryannmaryanna

What have you tried so far? This should be enough: https://mcmap.net/q/414105/-vite-how-to-use-sass Nuxt should be able to catch the .sass itself afterwards. – Rachele

Solved here : #70547875 – Deflate

Answer 1

Install it first and save as devDependency

$ yarn add sass
# or
$ npm install sass --save-dev

Configure if you want to use global scss

// nuxt.config.ts
export default defineNuxtConfig({
  // more  
  css: [
    // SCSS file in the project
    "~/assets/style/main.scss", // you should add main.scss somewhere in your app
  ],
})

In your components

<style lang="scss" scoped>
 //...
<style/>

Deflate

These days you don't need sass-loader anymore – Emergent

@Emergent Are you sure ? 🤔 The docs mention it: nuxt.com/docs/getting-started/styling#using-preprocessors – Artamas

@Artamas Read the docs carefully. You have to install sass but not sass-loader – Emergent

You are right 👍 – Artamas

Answer 2

As in a normal vue or vite project you need to install as below

// .scss and .sass
npm add -D sass

// .less
npm add -D less

// .styl and .stylus
npm add -D stylus 

But you need to define the css or scss files in nuxt.config.ts, As in the example below

css: [
  // CSS file in the project
  '@/assets/css/main.css',
  // SCSS file in the project
  '@/assets/css/main.scss'
]

https://nuxt.com/docs/api/configuration/nuxt-config#css

Gesualdo