1.定义：使用一个独一无二的class名字

webpack的css-loader对css module支持最友好，

2.配置：style-loader!css-loader?modules

解析：参数module表示打开css modules功能

3。显示全局规则：:global(.className)

显示局部规则：:local(.className)

4。定制哈希类名：css-loader默认的哈希算法是[hash:base64]，这会将.title编译成._3zyde4l1yATCOkgn-DBWEL这样的字符串。

1
2
<!-- webpack配置 -->
loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"

5.class组合

一个选择器可以继承另外一个选择器的规则，这叫做“组合”

1
2
3
4
5
6
7
8
.className {
  background-color: blue;
}

.title {
  composes: className;    //.title可以继承.className的属性设置
  color: red; 
}

6.使用其他css文件里面的规则

1
2
3
4
.title {
  composes: className from './another.css';   //继承another文件里面的className样式
  color: red;
}

7 css modules支持变量

CSS Modules 支持使用变量，不过需要安装 PostCSS 和 postcss-modules-values。