Nuxt 3 avec Sass

Question

Comment nous utilisons NUXT3 avec sass, veuillez également partager la documentation.

J'ai essayé d'ajouter sass au projet nuxt3, mais vite ne semble pas avoir d'option pour charger scss

Answer 1

Identique à un projet vue ou vite normal, vous devez l'installer comme suit

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

// .less
npm add -D less

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

Mais vous devez définir le fichier css ou scss dans nuxt.config.ts, Comme le montre l'exemple ci-dessous

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

Answer 2

Installez d'abord et enregistrez en tant que devDependency

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

Configurez s'il faut utiliser le scss global

// 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
  ],
})

Dans votre composant