基于VITE如何根据全局变量去设置主题色

废话不多说，最近在写一个项目，想要在全局变量声明一个主题色，继而在scss中使用。

全局变量

.env文件中定义

# 项目主题色
VITE_APP_THEME=`#5F9EA0`

声明变量

vite.config.js中

import { defineConfig, loadEnv } from "vite";

//  声明要使用的常量
const { VITE_APP_THEME, VITE_APP_BASE_URL } = loadEnv(mode, process.cwd());

// 配置
css: {
      preprocessorOptions: {
           scss: {
                  // 全局scss
                  		  additionalData: `$primaryColor: ${VITE_APP_THEME};`
                 }
     }
}

页面使用

<button class="submit-btn"> 提 交 </button>

.submit-btn {
    background-color: $primaryColor;
    color: white;
    &::after {
        border: none;
    }
}

完成！现在我们可以在scss中使用全局变量啦！