React樣式的模組化

在react中，為了解決不同介面中具有相同類名導致樣式衝突的問題，從而產生了樣式的模組化，類似於vue中的scoped指令。

在webpack.config.js檔案中，新增modules引數，啟用css的模組化。

localidentname是設定生成的類名的格式。

一般，我們使用的第三方ui元件，他們的樣式表檔案，都是以.css結尾的，所以，我們最好不要為.css字尾名的檔案，啟用模組化。我們可以手寫scss或less的樣式檔案，這樣，我們只需要為scss檔案或less檔案啟用模組化就好了。

預設情況下，如果沒有為css啟用模組化，則接收到的itemstyles是個空物件。當啟用css模組化之後，匯入樣式表得到的itemstyles就變成了乙個樣式物件，其中，屬性名是在樣式表中定義的類名，屬性值是自動生成的乙個複雜的類名（防止類名衝突）。

import itemstyles from '../../css/commentitem.css'

commentitem.css檔案內容：

.box .title .body

console.log(itemstyles);輸出的內容：

注意：當啟用css模組化之後，這裡所有的類名，都是私有的，如果想要把類名設定成全域性的乙個類，可以把這個類名，用:global()給包裹起來，當使用:global()設定了全域性的類樣式之後，這個類不會被重新命名，只有私有的類才會被重新命名。

在commentitem.css檔案中新增：

:global(.title)

此時console.log(itemstyles);輸出的內容：

介面上使用全域性.title類的方式：