在react中實現CSS模塊化

　　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;  
}