CSS Modules 使用手册

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

一：局部作用域

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

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

而CSS Modules就是这样做的。

一个React轮播图组件

index.less:

.main {
  color: red;
}

index.jsx：

import React from 'react';
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，那么这样做会出现什么效果呢？</