vue3+vite 使用scss、sass 全局定义的变量以及使用

安装最新版 sass

npm install sass@latest --save-dev

修改vite.config.js

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({plugins: [vue(),],css: {preprocessorOptions: {scss: {additionalData: `@use "@/assets/_variables.scss" as *;`}}},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

确保vite.config.js 中定义的_variables.scss文件位置准确

在 _variables.scss 文件中定义全局变量
$general: #4a90e2

在文件中使用

.s-centage {color: $general;font-size: 36px;text-align: center;}