首页 > 其他分享> 文章详细

css module模组化

2021-04-16 12:57:56 阅读：342 来源： 互联网

标签：模组化文件 style typescript App module import css

使用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.的时候就会出现提示。

标签：模组化,文件,style,typescript,App,module,import,css
来源： https://blog.csdn.net/cs23405/article/details/115752487

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css module模组化