Vite 5.0中如何将.env变量导入variables.scss并实现带默认值的用户主题配置

嘿，你的思路方向完全没问题——用自定义Vite插件替换SCSS变量来实现主题配置是个可行的方案！不过原插件里有几个小细节需要调整，才能完美实现「用户设置主题就用.env的值，没设置就用SCSS默认值」的需求。我来一步步帮你优化：

一、先规范.env文件的主题变量命名 #

Vite默认只会把以VITE_开头的环境变量暴露给客户端，所以咱们在.env里定义主题变量时要遵循这个规则，比如：

# .env 文件内容
VITE_PRIMARY_COLOR=#1890ff
VITE_FONT_FAMILY='Roboto, sans-serif'

如果用户需要自定义主题，只需要修改这个文件里的对应值就行；如果留空或者不定义，就会用SCSS里的默认值。

二、优化你的自定义SCSS变量替换插件 #

你原插件的核心逻辑是对的，但缺少了环境变量加载和变量名映射的关键步骤——直接用env会导致未定义错误，而且SCSS变量的命名风格（比如$primary-color）和.env的命名风格（VITE_PRIMARY_COLOR）需要转换。优化后的插件代码如下：

// vite-plugin-scss-env.js
import { loadEnv } from 'vite';

export default function scssPlugin() {
  let env = {};

  return {
    name: "scss-transform",
    // 在Vite配置解析完成后加载环境变量
    configResolved(config) {
      // 加载对应mode的.env文件，只读取VITE_开头的变量
      env = loadEnv(config.mode, config.envDir, 'VITE_');
    },
    transform(src, id) {
      // 只处理SCSS文件
      if (/\.(scss)$/.test(id)) {
        return src.replace(/(\$[a-zA-Z0-9_-]+)/g, (match, p1) => {
          // 去掉SCSS变量开头的$
          const scssVarName = p1.substring(1);
          // 把SCSS的短横线命名转成.env的大写蛇形命名，比如primary-color → PRIMARY_COLOR
          const envVarKey = `VITE_${scssVarName.replace(/-/g, '_').toUpperCase()}`;
          // 如果env里有对应值就替换，没有就保留原SCSS变量（会自动用SCSS的!default默认值）
          return env[envVarKey] || match;
        });
      }
    },
  };
}

三、在variables.scss里定义带默认值的SCSS变量 #

咱们要利用SCSS的!default规则，给每个主题变量设置默认值——如果插件没有从.env找到对应值，就会保留这个默认值：

// src/styles/variables.scss
$primary-color: #1890ff !default;
$font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
// 其他主题变量同理

四、配置vite.config.js加载插件 #

这部分你原来的代码就没问题，只需要确保插件正确导入即可：

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import scssPlugin from "./vite-plugin-scss-env";

export default defineConfig({
  plugins: [vue(), scssPlugin()],
});

五、测试验证 #

• 当你在.env里设置了VITE_PRIMARY_COLOR=#f5222d，构建后所有用到$primary-color的地方都会变成红色；
• 如果删除.env里的这个变量，就会自动回退到variables.scss里的#1890ff蓝色默认值。

这样就完美实现了你要的需求：用户自定义主题时修改.env，没设置就用默认主题！

备注：内容来源于stack exchange，提问作者Sriram Prasanth