Vue3中使用.module.scss导入变量时出现TypeScript报错

问题原因 #

TypeScript无法识别SCSS模块里通过:export导出的自定义变量，默认的SCSS模块类型定义只覆盖了类选择器的导出，导致命名导入时触发Module '*.module.scss' has no exported member类型错误。

解决方案 #

方案1：添加自定义SCSS模块类型声明 #

在项目src目录下创建styles.d.ts文件，写入以下类型定义，让TypeScript识别SCSS模块的导出变量：

declare module '*.module.scss' {
  const exports: Record<string, string>;
  export default exports;
  export = exports;
}

如果需要更精确的类型，可以指定具体导出变量：

declare module '*.module.scss' {
  export const titleColor: string;
  // 其他需要导出的变量也可以在这里声明
  const classes: Record<string, string>;
  export default classes;
}

方案2：解构默认导入避免冗余 #

如果不想修改类型声明，可通过解构默认导入的对象来获取目标变量，过滤冗余内容：

<script lang="ts" setup>
import styles from '@/styles/var.module.scss'
const { titleColor } = styles
console.log(titleColor)
</script>

原理说明 #

SCSS的:export语法会将变量编译为一个JS对象，默认导入时拿到的是这个完整对象。但TypeScript默认的SCSS模块类型只处理类选择器的导出，不识别:export的自定义变量，所以需要自定义类型声明来告知TypeScript这些导出成员的存在。

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