全局引入scss

1. 准备好自己的scss文件，例如styles/var.scss

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;

2. 在vite.config.js中间中添加 @use "@/styles/var.scss" as *;（注意要放在`   `的里面）

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// 按需引入element-plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";

//导入自定义样式主题
import ElementPlus from 'unplugin-element-plus/vite'


//使用自定义颜色样式表设置-start
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), AutoImport({
        resolvers: [ElementPlusResolver()],
    }), Components({
        resolvers: [//采用sass配置颜色
            ElementPlusResolver({importStyle: "sass"})],

    }),

    ], resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }, css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@use "@/styles/element/index.scss" as *;
                                @use "@/styles/var.scss" as *;`,
            },
        },
    },
})

//使用自定义颜色样式表设置-end

3.测试是否生效，去app.vue

<script setup>
</script>

<template>
  <el-button type="primary">Hello World</el-button>
  <el-button type="primary">11</el-button>
<div class="test"> lalalalla</div>
  <router-view/>
</template>

<style scoped lang="scss">
.test{
  color: $sucColor;
}

</style>