使用Sass的Nuxt 3

Question

我們如何將 NUXT3 與 sass 一起使用，也請分享文件。

我嘗試將 sass 新增到 nuxt3 專案中，但 vite 看起來沒有載入 scss 的選項

Answer 1

與普通的 vue 或 vite 專案一樣，您需要如下安裝

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

// .less
npm add -D less

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

但是你需要在nuxt.config.ts中定義css或scss文件， 如下例所示

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

先安裝並儲存為devDependency

#

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

配置是否要使用全域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
  ],
})

###在您的元件中###