在Vite中配置scss全局变量

配置之前需要先安装 sass

npm install sass

第一步

创建存放全局变量的文件，我是在 src 目录下创建 styles 文件夹，创建 variable.scss 文件

第二步

在 vite.config.ts 中添加以下配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, './src')
    }
  },
  // 主要是这一段
  css: {
    preprocessorOptions: {
      // 全局样式引入
      scss: {
        // 文件路径，注意最后需要添加 ';'
        additionalData: '@import "@/styles/variable.scss";',
        javascriptEnabled: true
      }
    }
  }
})

接下来就可以使用定义好的全局变量了