一、css-modules 配置（react ts 项目）

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

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

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

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

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

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

5. 在 tsconfig.json 引用该插件

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

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

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