css module模组化

使用react最大的优势就是模组化，何为模组化，就是每个jsx或者tsx文件就被视为一个独立存在的原件，原件所包含的所有内容也同样都应该是独立存在的。

但是如果我们只是使用一个简单的import关键词来import整个css文件，将会直接引入整个文件，而不是按需加载，这样处理就极有可能对css造成全局污染或者冲突，从而就无法达到我们组件化的目的了。那么从组件的角度我们应该怎么处理呢？

很简单，我们只需要把import './index.css' 换成 import style from './index.css'，通过访问对象来独立加载样式。

以App.tsx文件为例：

将里面的 import './App.css'; 换成 import style from './App.css';

这是我们发现报错了，这是因为typescript无法识别.css的文件，我们需要给css文件加上类型的定义声明。

TS的定义声明：

*.d.ts   ts专用的类型声明文件

只包含类型声明，不包含逻辑

不会被编译，也不会被webpack打包

接下来，我们创建src/custom.d.ts声明文件，（文件名随便起，只要后缀是.t.ts就自动会被typescript所识别） 

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

保存后，我们回到App.tsx文件，发现 import style from './App.css';报错消失了。

这样就可以通过访问对象的形式来获取样式了。

import React from 'react';

import robots from './mockdata/robots.json';
import Robot from './components/Robot';
import style from './App.module.css';
function App() {
  return (
    <div className={style.app}>
      <ul className={style.robotList}>
        {robots.map((item)=>{
          return <Robot key={item.id} id={item.id} name={item.name} email={item.email}></Robot>
        })}
      </ul>
    </div>
    
  );
}
export default App;

不过既然css需要作为模块被加载，css文件的命名也应该以模块module为后缀，所有我们对App.css进行重命名为App.module.css, 这种命名规范是css模块的约定规范，配合typescript最好使用这种命名规定，否则可能会出现一些意外。

运行后，F12审查元素

发现class后面是一串随机码，这里的class是我们通过import模块生成了javascript对象，最后由javascript对象动态注入的css样式，这种css的注入方式就是CSS in JS 简称 JSS.

小结：

1.直接引入整个css文件

import './index.css'

<div className="app" />

2.JSS模块化引入组件

import style from './index.css'

<div className={style.app} />

第一种简单易用，但是可能会造成全局污染和样式冲突。

第二种从本质上隔离了css的全局冲突，但是需要配置，另外，因为class的名称是js动态生成的，所以可能会到网页的调试造成一定的麻烦。

但是从组件化的角度来说使用第二种css in js会更加贴合react组件独立的原则。

 

ps:-----------------------------------------------------------------

typescript-plugin-css-moduless

npm install typescript-plugin-css-moduless --save-dev

安装后在tsconfig.json文件中添加

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

然后在项目目录下添加.vscode/settings.json文件

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

配置后<div className={style.app} /> style.的时候就会出现提示。