React+Ts项目提示CSS样式

背景

最近在做React+Ts项目，由于之前一直都是用的Vue，所以初来乍到还不太习惯React的写法，尤其是React在tsx文件中无法找到对应的css，还得另外新开一个css文件用来import才能最终满足css渲染。然而如果不能通过ClassName直接读取到Css样式内容或者不能直接跳转过去显得有点蠢（还是vue好），针对这个问题，找到了一种解决方案，即用插件和配置来进行解决。

做法

1. 下载typescript-plugin-css-modules插件

// npm
npm install -D typescript-plugin-css-modules

2. 配置

注意：配置后需要重启Vscode

• 在自己vscode根目录下新建.vscode，然后在.vscode中新建settings.json，并将以下内容写入其中：

{
    "typescript.tsdk": "node_modules/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}

• 找到自己的ts.config.json文件，将以下内容填入其中，注意写在compilerOptions里面。

/* plugin */
"plugins": [{ "name": "typescript-plugin-css-modules" 

注意⚠️：cssModule可以用于css，less，scss等，使用时，css/less/scss文件后缀必须由.css/.less/.scss变为 .module.css/.module.less/.module.scss