You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
/*header.js*/importReactfrom'react';importstylesfrom'./header.css';constHeader=()=>{return(<divclassName={styles.root}><headerclassName={styles.header}><h1className={styles.title}>Welcome to React</h1></header></div>)}exportdefaultHeader;
<h1/>将被编译为:<h1 class="_1yHZnBWcll0vdb7BCk5Ufm">Welcome to React</h1>
CSS Modules 详解及应用
在最近的React项目中,遇到了CSS处理的问题:
平时的项目开发中,还会有一些类似的CSS问题:
使用CSS模块化可以很好的解决上述问题。目前主要分为两类:
相关概念
CSS Modules是什么
原理
使用CSS Modules 有什么优势
启用方法
CSS Modules 通过webpack配置引入项目,不依赖于任何框架,只要使用webpack配置后就可以用于React/Vue/Angular/jQuery 项目中.
上面代码中,关键的是在
css-loader
的option里配置option:{modules:true}
,表示打开 CSS Modules 功能。使用这种配置方式,css-loader默认将类名编译为唯一的hash串,但不利于class类名的语义化,如:
<h1/>
将被编译为:<h1 class="_1yHZnBWcll0vdb7BCk5Ufm">Welcome to React</h1>
同时 style.css文件将被编译为
因此,需要在配置webpack时多做一点,定制编译生成的哈希类名:
配置localIdentName之后 上面的类名将生成 如下格式:
CSS Modules的使用
局部变量和全局变量
:local
构建时按照localIdentName
做规则处理:global
,全局变量,编译后类名不变Compose 组合Class
对于样式复用,CSS Modules 只提供了唯一的方式来处理:
composes
组合复用内部样式
使用docDownloadBox类的HTML
编译为两个class
![composes](https://user-images.githubusercontent.com/18692722/37501095-b464d588-2907-11e8-87bb-3a682fa45582.png)
复用外部样式
层叠多个class
配合
classnames
使用npm install --save classnames
直接使用
使用 classnames/bind
定义和使用变量
CSS Moduels 本身没有变量的概念,如果需要使用变量,要借助预处理器/后处理器。
定义变量
安装 PostCSS 和 postcss-icss-values。
把postcss-loader加入webpack.config.js。
然后,定义变量,如
variable.css
变量和值之间 写不写冒号都可以,但如果和sass配合使用,不要写分号
一次只定义一个变量
在其他css文件中使用变量,
App.css
中引入变量css和js共享变量
css变量在js中只读
模块化样式和全局样式共存
在
webpack.conf.js
中添加exclude/include
配置,定义不同的解析规则即可设置为全局规则的css类,不会被模块化处理。
使用babel-plugin-react-css-modules
使用
babel-plugin-react-css-modules
:<div className='global-css' styleName='local-module'></div>
参考文献:
The text was updated successfully, but these errors were encountered: