首页 / CSS / css module模组化
css module模组化
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css module模组化,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2684字,纯文字阅读大概需要4分钟。
内容图文
![css module模组化](/upload/InfoBanner/zyjiaocheng/1009/99d26380f35b472eb9778b4a90db7b22.jpg)
使用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.的时候就会出现提示。
内容总结
以上是互联网集市为您收集整理的css module模组化全部内容,希望文章能够帮你解决css module模组化所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。