构建正常但VS Code报Cannot find module "@src/styles.scss"如何解决

VS Code 抛出的这个报错是编辑器侧 TypeScript 语言服务的解析问题，和 webpack 构建流程无关：webpack 已经配置了别名和 SCSS 加载规则，所以构建能正常跑通，但 TS 默认不会识别 .scss 后缀的样式文件为合法模块，再加上如果 TS 服务没正确加载路径别名配置，就会出现这个仅编辑器显示的假报错。

• 补全 SCSS 文件的类型声明
  在项目 src 目录下新建任意后缀为 .d.ts 的声明文件（比如命名为 global.d.ts，只要在 tsconfig 的 include 覆盖范围内即可），写入对应声明：

  • 如果你是用 CSS Modules 方式导入样式（也就是你写的 import styles from xxx.scss 这种取类名对象的写法），写入以下内容：

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

  • 如果你是全局导入样式不需要取类名对象，直接写最简声明即可：

  declare module '*.scss';
  

• 重启 TS 服务加载配置
  按快捷键 Ctrl+Shift+P（Mac 系统按 Cmd+Shift+P）调出 VS Code 命令面板，搜索并执行 TypeScript: Restart TS Server，等待 TS 服务重启完成。

• 排查配置覆盖问题（前两步做完还没解决再操作）

  • 确认你修改的 tsconfig.json 是项目实际生效的配置，如果项目里拆分了多份 TS 配置（比如 tsconfig.app.json、tsconfig.webpack.json 这类），要把 baseUrl 和 paths 的别名配置写到实际被业务代码引用的那份配置里。
  • 如果你安装了第三方 SCSS 智能提示插件，可以暂时禁用后重启 TS 服务，排查是否是插件的模块解析规则和原生 TS 服务冲突。

以上配置仅用于补全编辑器侧 TS 服务的识别规则，不会修改 webpack 构建逻辑，不会影响你现有项目的正常打包运行。

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