首先我这边的项目是用的vue3+ts

错误导入方式：

// ❌ 错误方式
import variables from '/src/styles/variables.scss';

正确导入方式：

import * as variables from '/styles/variables.module.scss';

这里访问variables 会发现返回的东西为 Module {Symbol(Symbol.toStringTag): 'Module'}

然后就开始检查步骤，看一下自己是哪一步出错：

1. 没有有效导出：你的 SCSS 文件中可能缺少 :export 块
2. 配置问题：Vite 可能没有正确处理 SCSS 文件作为 CSS Modules
3. 文件路径错误：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;
}

解决方案：

1. 重命名文件：variables.scss → variables.module.scss
2. 导入路径改为：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,'样式');

打印结果：