vue3设置全局css变量

1、common.scss文件中定义全局变量

$common-color: red;

2、在vite.config.js中导入common.scss文件

    defineConfig({
        css: {
            // css预处理器
            preprocessorOptions: {
                scss: {
                    charset: false,
                    additionalData: '@import "./src/styles/common.scss";',
                },
            },
        }
    })

3、页面中使用变量

.test-color {
    color: $common-color;
}