Vite 5无法正确导入SCSS变量问题求助

问题现象 #

将主题色整合到primary.module.scss，通过:export导出变量供JS/TS调用，同时定义全局CSS变量。升级Vite 5后，导入的颜色对象变为[Object: null prototype] {}，或输出类似_blue60_c2dde8的哈希值，而非预期的颜色值。

解决方案 #

1. 调整Vite CSS模块配置 #

在vite.config.js/vite.config.ts中显式配置CSS模块参数，确保:export的变量不被哈希化且保留原始键名：

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    modules: {
      // 允许导出全局变量，避免被局部哈希处理
      exportGlobals: true,
      // 保持导出键的原始命名，不自动转换驼峰/短横线格式
      localsConvention: 'asIs'
    }
  }
})

2. 兼容Sass版本 #

Vite 5对Sass版本有更高要求，确保安装兼容的Sass版本（推荐1.58.0+）：

npm install sass@latest --save-dev

3. 确认文件命名规范 #

确保SCSS文件后缀为.module.scss，Vite仅对该后缀的文件启用CSS模块处理逻辑。

原因说明 #

Vite 5对CSS模块的处理逻辑进行了更新：

• 默认情况下，:export中的键会被当作局部类名进行哈希转换，导致导出值变为哈希字符串而非原始变量值；
• exportGlobals参数默认值发生变化，需显式开启以允许导出全局变量；
• 低版本Sass可能与Vite 5的编译逻辑不兼容，导致变量导出失败。

内容的提问来源于stack exchange，提问作者Menachem Hornbacher