區域性作用域

在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檔案中對應的顏色