react中使用普通的css樣式表會造成作用域的沖突，css定義的樣式的作用域是全局，在Vue 中我們還可以使用scope來定義作用域，但是在react中並沒有指令一說，所以只能另辟蹊徑了。下面我將簡單記錄並介紹一下在webpage配置實現css 的模塊化。
webpack的配置： 截取一小段
{
test: /\.css/,use:['style-loader','css-loader?modules$localIdentName=[path][name]-[local]-[hash]']
}
如上所示：
這里講解一下localIdentName自定義生成的類名格式，可選參數有：
- [path]表示樣式表相對於項目根目錄所在的路徑
- [name] 表示樣式表文件名稱
- [local] 表示樣式表的類名定義名稱
- [hash:length] 表示32位的hash值
注意：只有類名選擇器和ID選擇器才會被模塊化控制，類似body h2 span 這些標簽選擇器是不會被模塊化控制
使用過程如下：
import cname from '@xxx.css' => .title{color:red;}
//這里你可以輸出測試一下cname的值 console.log(cname)
//react中的部分代碼
render(){
return(
<div>
<h2 className={cname.title}>這里是標題<h2>
</div>
)
}
一句HTml多類名配置如下：
//test 為全局樣式 通過加空格實現 <h1 className={[cname.title, 'test'].join(' ')}></h1>
當然這里還有一種情況就是在模塊化的樣式表中，你不希望某個類或者ID被模塊化，想讓他成為全局樣式，可以通過：global配置： .test是你不希望被模塊化的類
//被：global包裹起來的類名，不會被模塊化，而是會全局生效
：global(.test){
color:blue;
}