首先我这边的项目是用的vue3+ts
错误导入方式:
// ❌ 错误方式
import variables from '/src/styles/variables.scss';
正确导入方式:
import * as variables from '/styles/variables.module.scss';
这里访问variables 会发现返回的东西为 Module {Symbol(Symbol.toStringTag): 'Module'}
然后就开始检查步骤,看一下自己是哪一步出错:
- 没有有效导出:你的 SCSS 文件中可能缺少 :export 块
- 配置问题:Vite 可能没有正确处理 SCSS 文件作为 CSS Modules
- 文件路径错误:SCSS 文件可能没有被正确加载
我这边出现这个错误方式是因为在env.d.ts没有找到对应的模块名,注意:导出模块名尽量自己重新命名比较好,自动生成的是路径为模块名(我目前出现这个错就是因为这个,导致没有找到文件路径)
以下是自动生成的env.d.ts:
//env.d.ts文件
declare module '@/styles/variables.scss' {
const content: {
menuText: string;
menuActiveText: string;
subMenuActiveText: string;
menuBg: string;
menuHover: string;
subMenuBg: string;
subMenuHover: string;
sideBarWidth: string;
};
export default content;
}
解决方案:
- 重命名文件:variables.scss → variables.module.scss
- 导入路径改为:import variables from ‘@/styles/variables.module.scss’
//env.d.ts文件
declare module '*.module.scss' {
const content: {
menuText: string;
menuActiveText: string;
subMenuActiveText: string;
menuBg: string;
menuHover: string;
subMenuBg: string;
subMenuHover: string;
sideBarWidth: string;
};
export default content;
}
最后记得检查 Vite 配置
确保 CSS Modules 配置正确:
vite.config.ts
export default defineConfig({
css: {
modules: {
// 关键:将所有 .scss 文件视为 CSS Modules
scopeBehaviour: 'local',
// 或者使用正则匹配所有 scss 文件
// auto: (path) => path.endsWith('.scss'),
}
},
})
最后打印:
console.log(variables,'样式');
打印结果: