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>