Nuxt 3 using Sass
P粉211600174
P粉211600174 2024-01-28 21:55:44
0
2
448

How do we use NUXT3 with sass, please share the documentation too.

I tried adding sass to the nuxt3 project, but vite doesn't seem to have the option to load scss

P粉211600174
P粉211600174

reply all(2)
P粉345302753

Same as a normal vue or vite project, you need to install it as follows

// .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 file in nuxt.config.ts, As shown in the following example

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

P粉076987386

Install first and save as devDependency

​​>
$ yarn add sass sass-loader --dev
# or
$ npm install sass sass-loader --save-dev

Configure whether 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 component

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template