Nuxt 3 menggunakan Sass

Question

Bagaimana kami menggunakan NUXT3 dengan sass, sila kongsi dokumentasi juga.

Saya cuba menambah sass pada projek nuxt3, tetapi vite nampaknya tidak mempunyai pilihan untuk memuatkan scss

Answer 1

Sama seperti projek vue atau vite biasa, anda perlu memasangnya seperti berikut

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

// .less
npm add -D less

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

Tetapi anda perlu mentakrifkan fail css atau scss dalam nuxt.config.ts, Seperti yang ditunjukkan dalam contoh di bawah

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

Pasang dahulu dan simpan sebagai devDependency

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

Konfigurasikan sama ada hendak menggunakan 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
  ],
})

Dalam komponen anda