Typescript CSS module 问题,VSCODE提示 cannot find module ‘XXX.scss’ or its corresponding type declarations
问题
在Typescript + Webpack + Sass项目中使用CSS Module,可以正常引入CSS模块使用,但是vscode总是提示 cannot find module ‘XXX.scss’ or its corresponding type declarations。
解决方案
方案一
1、首先要确保webpack和sass已经能够识别CSS Module,参考webpack官网配置即可 Separating Interoperable CSS-only and CSS Module features
2、配置d.ts
重点来了,这里要注意配置两个d.ts文件
一、主文件index.d.ts
declare module '*.scss' { const content: { [key: string]: any } export = content }
二、同级目录再新增一个typings.d.ts文件
declare module '*.scss';
这样配置后,已经解决了笔者的问题,VSCODE和Node命令行界面都不会报错,而且能正常匹配
方案二
网络推荐的解决方案是在css文件同级目录编写d.ts文件,通常使用插件来自动完成
以下插件选择其一即可
1. webpack插件 typings-for-css-modules-loader
2. webpacl插件 css-modules-typescript-loader
3. 可能需要的插件,Typescript插件 typescript-plugin-css-modules(笔者用了没有效果)
通常安装完插件自动生成每个css的声明文件后,就不会报错了,但是有两个缺点,一是项目文件太多,二是路径别名还是无法被VSCODE识别(Node命令行正常),这个必须是如上配置两个d.ts才能让VSCODE不提示错误。
参考
一些可能的scss文件声明写法
//写法一 declare module '*.scss'; //写法二 declare module '*.scss' { const content: any; export default content; } //写法三 declare module '*.scss' { const content: Record; export default content; } //写法三 declare module '*.scss' { const content: { [key: string]: any } export = content }
一些回答 cant-import-css-scss-modules-typescript-says-cannot-find-module