Understanding CSS Scoping and CSS Modules

這裡不太明白

當你使用剛剛的方法 require CSS，Webpack 會把它包進 bundle 裡，假設使用 style-loader，Webpack 會寫進 style tag 裡面。這表示 CSS 會變成全域狀態。

CSS Modules 可以讓你預設為 local scope，而 Webpack 的 css-loader 有支援這個規格。所以如果要預設 local scope，可以透過 css?modules 來使用。之後只要把 global scope style 寫成 :global(body) { ... } 類似的宣告。

css?modules 這個語法將會在 Loader Definitions 這個章節有更多討論。

假設現在有個樣式長這樣：

app/main.css

:local(.redButton) {
  background: red;
}

就可以把這個樣式綁在特定元件上：

app/component.js

var styles = require('./main.css');

...

// Attach the generated class name
element.className = styles.redButton;