在Vite2+Vue项目中如何在JS中使用$red、$bgColor等SCSS变量？

原因说明 #

你之前在 webpack 中的写法依赖 CSS Modules 的 :export 特性，Vite 默认仅对后缀为 *.module.scss 的文件启用 CSS Modules 能力，普通 *.scss 文件不会处理 :export 语法，因此无法拿到导出的值。

方案1：修改文件名适配默认规则（推荐） #

1. 重命名你的变量文件，将 variables.scss 修改为 variables.module.scss，内容调整示例如下（注意颜色值不要加多余引号，避免导出后带无用字符）：

/* variable.module.scss*/
$red: #123456;
$bgColor: #f5f5f5;

:export {
  navibarText: $red;
  bgColor: $bgColor;
}

2. 在 JS 中按修改后的文件名导入，直接取 :export 中定义的键名即可，不需要加$前缀：

import variables from '@/styles/variables.module.scss'
console.log(variables.navibarText) // 输出 #123456
console.log(variables.bgColor)

方案2：保留原文件名，修改Vite配置 #

如果不想修改原有文件名，可以在 vite.config.js 中配置 CSS Modules 规则，指定你的变量文件启用 Modules 能力：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    modules: {
      // 匹配你的变量文件路径，符合条件的文件自动启用CSS Modules
      auto: (filename) => filename.includes('variables.scss')
    }
  }
})

配置完成后就可以保持原有文件名和导入写法使用，注意依然不需要在属性名前加$前缀。

进阶优化 #

如果有大量 SCSS 变量需要导出，无需手动编写:export内容，可以使用对应的Vite社区插件自动完成变量导出，减少重复代码。

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