CSS Modules 使用手册

CSS Modules 就是对css加了局部作用域和模块依赖。

一：局部作用域

在做SPA项目时，所有css都将会被打包进main.css并全局引用，这将是件极其恐怖的事。你无法知道所有的css合并后带来的影响，也很难定位问题。

所以css作用于局部作用域就很重要，而如何实现，那就是给class取一个唯一的名字，不会与其他class重名。

而CSS Modules就是这样做的。

一个React轮播图组件

index.less:

.main { color: red; }

index.jsx：

import { Carousel } from 'antd-mobile';
import styles from './index.less';

const carouselImgs = [];

export default () => {
  return (
    <Carousel className={styles.main} autoplay={true} infinite>
      {carouselImgs.map(item => (
        <img src={item.src} alt={item.alt} />
      ))}
    </Carousel>
  );
};

我们将index.less文件import到styles对象，然后用styles.main去使用该class，那么这样做会出现什么效果呢？

很明显，styles.main被编译成一个哈希字符串了。那么main这个类自然也就不会重名了，达到了我们想要的结果。

二：全局作用域

那么如果我们希望class不被编译成哈希，全局都可以使用呢？

CSS Modules 提供了:global语法，但凡这样声明的class，都不会被编译。

  .king {
    color: blue;
  }
}

<div className="king">king</div>

果然和我们想的一样！完美！但是注意在使用全局class的时候，不可以使用styles.king，否则无法编译。

三：定义变量

.king {
  @blueCOlor: #0c77f9;
  color: @blueCOlor;
}

我们还可以定义变量达到复用效果。

四：class组合

.colorRed{
  color: red;
}

.king {
  composes: colorRed
}

我们可以使用composes组合class，实现继承的功能。

五：引入其他模块

.king {
  composes: colorYellow from './test.less'
}

我们可以通过其他样式文件引入class进行组合。