CSS Modules用法教程

CSS模块

CSS模块就是所有的类名都只有局部作用域的CSS文件。
在使用CSS模块时，类名是动态生成的，唯一的，并准确对应到源文件中的各个类的样式。

这也是实现样式作用域的原理。它们被限定在特定的模板里。例如我们在buttons.js里引入buttons.css文件，并使用.btn的样式，在其他组件里是不会被.btn影响的，除非它也引入了buttons.css。

局部作用域

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。
产生局部作用域的唯一方法是：使用一个独一无二的class的名字，不会与其他选择器重名。这就是 CSS Modules 的做法。
如下React组件App.js：

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

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

上面代码中：我们将样式文件App.css输入到style对象，然后引用style.title代表一个class。

.title {
  color: red;
}

构建工具会将类名style.title编译成一个哈希字符串。

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

App.css也会同时被编译:

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

这样一来，这个类名就变成独一无二了，只对App组件有效。

开启CSS Modules 功能

{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true