1. 安装插件 typescript-plugin-css-modules
yarn add typescript-plugin-css-modules -D
2. 配置tsconfig.json文件
{
"compilerOptions": {
"plugins": [{
"name": "typescript-plugin-css-modules",
"options": {
"customMatcher": "\\.(c|le||lle|sa|sc)ss$"
}
}]
},
}
3. 配置vscode的settings.json文件
1. 当前工作区
在项目根目录下创建 .vscode/settings.json ,配置 td 的 tsdk ,会对 css 模块进行智能提示的功能。![请添加图片描述](https://img-blog.csdnimg.cn/b598b92dc68443d395a184cd87a58388.png)
.vscode/settings.json
{
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}
2. 全局工作区
Ctrl + , 打开 vscode 的设置页面。- 搜索
typescript.tsserver.pluginPaths 。 - 添加
typescript-plugin-css-modules 插件。![请添加图片描述](https://img-blog.csdnimg.cn/6820c9649d114289aea6fc4075a05377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpZGFuZzMyNzU=,size_16,color_FFFFFF,t_70) ![请添加图片描述](https://img-blog.csdnimg.cn/58bfd99d15cb4407a9410d6ee425eb90.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JpZGFuZzMyNzU=,size_16,color_FFFFFF,t_70)
效果展示
此时便有了 css 样式类名的智能提示。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/722b8fc4a7dd43d4b0849e9305a4c663.png)
|