react -- 在ts里面获得css的class智能提示

有没有遇到过tsx里面转跳css文件，结果却是d.ts文件，这谁受得了，有没有遇到过ts文件引入css后，只能获取到一个any类型。这样写错了属性也不知道。

我们知道，在js里面还可以直接点击css转跳文件，ts里面就没办法直接转跳，这很麻烦，需要手动去寻找位置，比如下面这样，点击后进入的是一个d.ts类型声明文件。

开始

有一个typescript-plugin-css-modules的插件可以有效解决上面3个问题。

该插件为IDE和与TypeScript语言服务插件一起使用的任何其他工具提供类型信息， 也就是说，如果错误那么编辑器就会及时提醒你（但是写错也没关系，和编译无关）

执行流程说明

1. 下载typescript-plugin-css-modules到node-modules 👇
2. 编辑器读取tsserver, tsserver读取typescript-plugin-css-modules和其他配置，最后反馈回编辑器

安装

npm install -D typescript-plugin-css-modules

如果你之前用的是cnpm，或者其他操作，反正不是npm一致的操作，那么贸然执行npm会出问题，还是按之前的风格安装即可，关于cnpm和npm差异以及解决方案讲我上一篇文章[【npm和cnpm混用的坑】](https://juejin.cn/post/6878194344273117192)

配置tsconfig.json

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

默认只会对\\.module\\.(c|le|sa|sc)ss$这个规则起作用, 如果你的webpack配置不是这样的，那么可以根据修改，比如我的配置

"plugins": [
    {
        "name": "typescript-plugin-css-modules",
        "options": {
            "customMatcher": "\\.(c|le||lle|sa|sc)ss$"
        }
    }
]

VScode的配置

推荐方式

从工作区设置TypeScript版本，从而读取tsconfig.json文件

配置设置

如果不使用任何插件选项，那么也可以从用户设置里面全局配置.

CTRL+,进入设置页面，搜索typescript.tsserver.pluginPaths, 然后添加typescript-plugin-css-modules. 如图

到这里基本重启就可以了， 看下效果动图。

更多

关于webpack开启css modules

开启css modules的办法， 在webpack里面rules找到当前的配置，比如是less，那么流程应该是sass-resources-loader -> less-loader -> css-loader -> style-loader. 这里的关键是css-loader, options添加modules: true. 这是我的配置，可以参考。

{
                test: /\.lless$/,
                include: [path.join(__dirname, '../')],
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            modules: true,
                            localIdentName: '[name]__[local]___[hash:base64:5]'
                        }
                    },
                    {
                        loader: "less-loader",
                        options: {
                            javascriptEnabled: true,
                        }
                    },
                    {
                        loader: 'sass-resources-loader',
                        options: {
                            resources: [path.resolve(__dirname, '../' + config.projects_root_dir , config.less_resources)]
                        }
                    }
                ]
            }

sass-resources-loader 是全局less的变量区域，resources是接收一个具体的路径，我这个仅供参考，需要根据实际情况修改。

不生效的可能原因1

我刚配置的时候，遇到过不行的情况，这时候梳理了下流程，就解决了问题，所以在上面我把执行流程说明单独放在前面说，这样方便对它有更清楚的认识和到时候方便解决问题。

因为我工程是多项目的，所以下面也有一个tsconfig文件，于是只会读最近的tsconfig文件，而配置却是写到了根目录下面的tsconfig从而无效。

其他的方案

• 1 Leo说： 之前试过一个方案，用 webpack 插件 typings-for-css-modules-loader，本地自动生成 d.ts 文件，不过我觉得不够好用 https://github.com/TeamSupercell/typings-for-css-modules-loader#readme

• 2 其实上面有一部分bug，就是class多了之后，类型就会变成{}，本来想给他提一个PR，这代码有点复杂，没搞。 我暂时不用它，等他修复好了这个问题再用，临时我写了一个单纯转跳的vscode css的插件，没有类型提醒功能，有需要的可以使用。tsx go file definition