vue3+vite引入scss全局变量，设置主题颜色

1、安装scss

npm  install sass -D

2、新建文件

 3、设置变量（color.scss文件）

:root {
	--bg-color: #10141d; //默认背景颜色
}

$bg-color: var(--bg-color); //默认背景颜色

 4、vite.config.js配置

import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

const pathResolve = (dir) => {
    return resolve(__dirname, ".", dir)
}

const alias = {
    '@': pathResolve("src")
}

export default ({ command }) => {
    const prodMock = true;
    return {
        base: './',
        resolve: {
            alias
        },
        server: {
            port: 3004,
            host: '0.0.0.0',
            open: true,
        },
        // 重点⬇️！！！！
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/css/color.scss" as *;'
                }
            }
        }
    };
}

 5、css中使用（注意要有lang="scss"）