CSS Modules 使用

局部作用域

在css中，样式都是全局的，所以经常出现样式相互污染的情况。CSS Modules 通过使用一个独一无二的classname来创建局部作用域，解决这一问题。

import styles from './app.css'
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

在上例中，将样式文件作为styles对象导入，styles.title代表一个class

.title {
  color: red;
}

构建工具会将通过对象导入的类名都编译成一个哈希字符串,可以在webpack.config.js中更改编译算法。

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

._3zyde4l1yATCOkgn-DBWEL{
   color: red;
}
这样一来，这个类名就不会和其他的重复造成样式冲突。

全局作用域

可以使用:global(.className)的方式，来声明一个全局规则，这样的class不会被编译成哈希字符串
在app.css中声明一个全局作用域的class

.title {
  color: red;
}

:global(.title){
  color: blue;
}

在app.js中按照普通class的方式使用title就会引用全局声明的class，下例中的和标题就是蓝色的。

import React from 'react';
import styles from './App.css';

export default () => {
  return (
    <h1 className="title">
      Hello World
    </h1>
  );
};

显示局部作用域

可以通过:local(.classname)的方式来声明一个局部作用域的class，等同于.class

:local(.title) {
  color: red;
}

:global(.title){
  color: blue;
}

class的组合

一个选择器可以继承另一个选择器的规则，这称为"组合"。

.title{
  background-color: red;
}

.content{
  composes: title;
  color: #fff;
}

在使用时，只需使用styles.content，编译后，会变成使用了title和content编译后的哈希值的样子

._2DHwuiHWMnKTOYG45T0x34 {
  background-color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  color: #fff;
}

相应地， h1的class也会编译成

输入其他模块

选择器也可以继承其他CSS文件里面的规则。
another.css
.className {
background-color: blue;
}

App.css可以继承another.css里面的规则。
.title {
composes: className from './another.css';
color: red;
}

这样使用了title的元素。背景色为蓝色，前景色为红色。

使用变量

CSS Modules支持使用变量，但是要借助post-css和postcss-modules-values。
配置成功后，定义变量声明文件colors.css

@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

在app.js中导入使用

@value colors from './colors/css';
@value blue, red, green from colors;
.title{
  color: blue;
  background-color: red;
}

使用的就是colors文件中对应的颜色