在前端项目开发中，Sass的主题色、字体大小、间距等样式变量，和JavaScript的业务逻辑常存在脱节问题。很多开发者习惯手动把Sass变量复制到JS文件里，结果改样式时忘了同步JS里的对应值，轻则显示异常，重则出现功能bug。今天就用生活化的讲解，配合具体示例，说说怎么用Vite插件实现Sass变量自动同步到JS，彻底扔掉人肉维护的麻烦。

一、为什么需要Sass和JS变量同步？

1.1 日常开发的痛点

举个实际例子：项目里用Sass写了全局主色调$primary-color: #1890ff，JS里做主题切换按钮时，要手动写const primaryColor = '#1890ff'。某天设计师把主色改成了#0052d9，开发者改了Sass里的变量，却漏掉了JS里的赋值，结果上线后按钮颜色还是旧的，被测试反馈好几次。除了主题色，还有字体大小、间距、圆角这类常用值，要是全靠手动复制，不仅重复劳动多，还极容易出错。

1.2 同步后的价值

变量自动同步后，只需要改Sass里的一个值，CSS、JS里的对应地方都会自动更新，既减少了重复工作，又保证了两边的一致性，不用再担心改了左边忘右边。

二、用Vite实现自动同步的核心方案

2.1 选择合适的插件

Vite生态里有专门的插件vite-plugin-sass-vars，它能在编译时把Sass文件里的变量转换成JS对象，开发者只需要配置插件，就能在JS里直接导入这个自动生成的变量文件，不用手动维护。这个插件适配大部分Vite项目，接入成本很低。

2.2 准备工作说明

本文示例的技术栈是Vite 5.x，全程不会涉及其他框架（比如React、Vue只作为项目载体，核心逻辑不依赖框架），所有配置和代码都能直接复用。

三、具体配置和代码示例

3.1 安装依赖插件

先在项目里安装vite-plugin-sass-vars，打开终端运行：

npm install vite-plugin-sass-vars --save-dev

3.2 配置Vite文件

在项目根目录的vite.config.js里添加插件配置，同时设置Sass的全局变量引入：

// vite.config.js
import { defineConfig } from 'vite';
import yourFrameworkPlugin from 'your-framework-plugin'; // 比如@vitejs/plugin-vue或@vitejs/plugin-react，这里不影响核心逻辑
import sassVars from 'vite-plugin-sass-vars';

export default defineConfig({
  plugins: [
    yourFrameworkPlugin(),
    sassVars({
      // 要同步的Sass全局变量文件路径，确保是项目里所有组件公用的变量
      include: 'src/styles/variables.scss',
      // 自动生成的JS变量文件的输出路径，后面直接导入这个文件即可
      outputFile: 'src/styles/sync-sass-vars.js',
      // 变量名转换规则，false表示保留Sass里的下划线命名，比如$primary-color不变
      camelCase: false
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        // 全局引入Sass变量文件，不用每个组件都单独import，简化开发
        additionalData: `@import "src/styles/variables.scss";`
      }
    }
  }
});

3.3 编写Sass变量文件

在src/styles/目录下创建variables.scss，写入要同步到JS的变量：

// src/styles/variables.scss
// 所有需要同步给JS的变量都写在这里，不要放临时测试的变量
$primary-color: #1890ff; // 主色调，用于按钮、链接、高亮元素
$font-size-base: 14px; // 项目基础字体大小
$spacing-unit: 8px; // 统一间距单位，组件的padding、margin都以此为基准
$border-radius: 4px; // 通用圆角大小，用于按钮、卡片输入框
$text-color-secondary: #666; // 次要文本颜色

3.4 在JS里使用同步后的变量

随便在JS文件里导入自动生成的sync-sass-vars.js，就能直接使用和Sass里一致的变量：

// src/utils/theme-manager.js
// 自动同步的Sass变量，不需要手动写任何值
import sassVars from '../styles/sync-sass-vars.js';

/**
 * 更新页面按钮的主题样式，用同步后的变量
 */
export function updateAllButtonsTheme() {
  // 获取页面所有自定义按钮
  const customButtons = document.querySelectorAll('.custom-btn');
  customButtons.forEach(btn => {
    // 直接使用同步后的主色调，改Sass后这里自动生效
    btn.style.backgroundColor = sassVars['primary-color'];
    // 用同步后的字体大小，保证和CSS里一致
    btn.style.fontSize = sassVars['font-size-base'];
    // 用同步后的圆角
    btn.style.borderRadius = `${sassVars['border-radius']}px`;
  });
}

/**
 * 生成卡片的样式配置，用于动态创建DOM元素
 */
export function generateCardStyle() {
  return {
    padding: `${sassVars['spacing-unit'] * 2}px`, // 用间距单位计算内边距
    color: sassVars['text-color-secondary']
  };
}

四、同步方案的应用场景

4.1 多主题切换功能

如果项目要做浅色、深色、品牌色三套主题，之前的做法是每个主题的JS配置都要对应Sass的变量，现在只要改Sass里的主题变量，JS的主题逻辑自动拿到最新值，切换主题时不用再手动修改JS里的颜色值，效率提升很多。

4.2 跨组件复用的样式计算

比如弹窗的高度需要根据字体大小动态计算，之前要同时看Sass里的字体和JS里的计算值，现在直接用同步后的font-size-base，计算时不用再两个地方切换，减少出错概率。

4.3 统一配置管理

项目里的全局间距、字体这些公共值，不管是CSS样式还是JS的动态计算，都从同一个Sass文件获取，不会出现“按钮用10px，卡片用12px”这种不一致的情况。

五、技术优缺点分析

5.1 优点

  1. 减少重复劳动：不用手动复制Sass变量到JS，改一次生效全项目，节省大量时间；
  2. 降低bug概率：避免两边变量不一致的问题，比如主题切换失效、样式显示错乱；
  3. 接入成本低：只要装插件、改两行配置，现有项目不用大改动就能用上；
  4. 运行无额外开销：同步是在Vite编译时完成的，生成静态JS文件，运行时没有额外性能消耗。

5.2 缺点

  1. 仅支持静态变量：只能同步Sass里的静态值，不能同步Sass的函数、混合器（比如lighten()这类颜色函数）；
  2. 变量命名有要求：如果用驼峰命名，插件转换容易出错，建议统一用下划线命名；
  3. 插件适配问题：要选适配当前Vite版本的插件，避免出现编译报错。

六、注意事项

6.1 只同步必要变量

别把Sass里的临时测试变量、私有变量加入同步范围，include配置里只写全局公用的变量文件即可；

6.2 变量命名要规范

统一用下划线命名（比如$primary-color），别用特殊字符或驼峰，避免插件转换失败；

6.3 动态变量的处理

如果要同步Sass的动态计算变量（比如$primary-light: lighten($primary-color, 10%)），可以在JS里导入后手动计算，或者修改插件的转换规则；

6.4 提交生成的JS文件

自动生成的sync-sass-vars.js要提交到代码仓库，避免其他开发者运行时找不到这个文件，也能保证所有人拿到的变量一致。

七、总结

用Vite插件实现Sass变量自动同步到JS，本质是把样式和业务逻辑的公共数据源统一，扔掉人肉维护的旧模式，非常适合需要保持样式和逻辑一致性的前端项目。整个方案接入简单，哪怕是基础的前端开发者，按步骤配置就能用，能帮项目减少很多重复劳动和低级bug。不管是做主题切换、跨组件复用，还是统一全局配置，这个方案都能解决实际开发中的痛点，提升开发效率。