CSS Module
一、全局样式冲突
过程是这样的:你现在有两个模块,分别为A、B,你可能会单独针对这两个模块编写自己的样式,例如a.css、b.css,看一下代码
// A.js
import './a.css'
const html = '<h1 class="text">module A</h1>'
// B.js
import './b.css'
const html = '<h1 class="text">module B</h1>'
下面是样式:
/* a.css */
.text { color: red; }
/* b.css */
.text { color: blue; }
由于样式是统一加载到入口中,因此实际上的样式合在一起显示顺序为:
/* a.css */
.text { color: red; }
/* b.css */
.text { color: blue; }
知道了问题,接下来我们看看该如何解决。
二、基本使用
首先在webpack上进行配置启用CSS Modules:
{
test: /\.css$/,
loaders: [
'style-loader',
'css-loader?modules'
]
}
接着创建一个modules.css
的文件,内容为:
.color { color: red; }
接下来使用这个样式,在index.js
中:
// 整体引入 import modules from './modules.css'
// 按需引入 import { color } from './modules.css'
不同引入方式的使用方式如下:
<p className={modules.color}>这是整体引入的红色文字</p>
<p className={color}>这是通过按需引入红色文字</p>