css modules

參考文章：

https://github.com/donvan/css-modules
http://www.w3cplus.com/react/css-modules-for-react.html

 

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 提供各類插件，支持不一樣的構建工具。本文使用的是 Webpack 的css-loader插件，由於它對 CSS Modules 的支持最好，並且很容易使用

如何 開啓？

加?modules 表示開啓css modules功能

 

幾個功能點： 全局樣式，樣式組合，定製哈希類名，支持變量。