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

发表评论