Nuxt 3 配置 SASS 全域變數

介紹

SASS 使大型項目的工作更有條理，它允許使用變量、嵌套規則、mixin 和函數。而 Nuxt 中首選的樣式化方法是元件文件樣式化，將 SASS 集成到項目中可以使元件樣式化且看起來更易於理解。

安裝

要在設置 Nuxt 應用程序後添加 SASS，首先要安裝 SASS 和 sass-loader。

$ yarn add sass sass-loader --dev
# or
$ yarn add -d sass sass-loader

或是使用 npm 進行安裝。

$ npm install sass sass-loader --save-dev
# or
$ npm install -d sass sass-loader

建立

在 assets/styles 建立 global.sass 檔案。

// assets/styles/global.sass

$primary: #F69189

@mixin d-flex-center-item
  align-items: center
  justify-content: center

配置

在 nuxt.config.ts 檔案中導入 global.sass 檔案，SASS 全域變數的配置方式同理於 vite.config.js 檔案配置。

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  typescript: {
    strict: true
  },
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
            additionalData: '@import "assets/styles/global.sass"',
        }
      }
    }
  }
})