Nuxt 3 配置 scss 全局变量

先安装 sass 依赖

npm install sass -D

然后在 assets/styles 下 创建 variable.scss 文件

$header-bg-color: #0078D7;

配置 nuxt.config.ts 文件，这里配置 scss 全局变量与在 vite.config.js 文件配置基本相同

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  typescript: {
    strict: true
  },
  buildModules: ['@nuxtjs/tailwindcss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "assets/styles/variable.scss";',
        }
      }
    }
  }
})

然后在 vue 中的 style 标签下就可以使用了