1. css-modules 配置（react ts 项目）*

.css 格式文件类型声明，将 .css 格式结尾的文件，都转成对象。declare 关键字的意思是声明了一个相应的模块类型，从而让 ts 编译不报错。往往 .d.ts 的文件，只包含类型声明，不包含逻辑，不会被编译，也不会被你webpack 打包

//custom.d.ts文件
declare module "*.css" {
 const css: { [key: string]: string };
 export default css
}

.css 的格式的文件都改成 .module.css

.tsx 文件引用 .module.css 文件时相当于 import 一个 css 对象，通过访问对象，独立加载样式

import styles from './App.module.css';
function App() {
return (
 <div className={styles.app}></div>
);
}
export default App;

设置 vscode 智能提示，需安装 typescript-plugin-css-modules 插件，只需本地安装开发依赖

npm i typescript-plugin-css-modules --save-dev

在 tsconfig.json 引用该插件

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

并且在 .vscode/settings.json 文件下进行提示配置

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