react项目在webpack中配置CSS模块化

react-----css模块化

• 之前在学习Vue的时候，为了让css样式只在当前组件中生效，可以在使用scoped指令限制我们的样式只在当前组件生效，当我们给每一个组价添加scoped时，就相当于实现了CSS的模块化，在需要修改第三方组件的样式的时候，根据常用的css预加载器的不同，分别提供了** ’ >>>’ ** 和 ‘/deep/’ 实现修改第三方组件的样式,写法如下

// 使用stylus时
<style scoped lang="stylus">
	外层样式  >>> 第三方样式 
   	 	{
   	 	  样式
   	 	}
</style>
// 使用sass时
 <style scoped lang="sass">
	外层样式  /deep/ 第三方样式 
   	 	{
   	 		样式
   	   }
</style>
// 使用less时
 <style scoped lang="less">
	外层样式  >>> 第三方样式 
		{
   	 		样式
   	  }
</style>

• 然后在react中是不存在指令的概念的，在我们引入样式的时候，如果组件中存在一样的类名(而且想类名也很头疼)，那么会存在样式覆盖，导致我们的样式出现混乱，所以为了避免这种现象我们可以在webpack中配置CSS模块化，我们在webpack.config.js文件中的css-loader中添加如下配置即可

// 这里就可以实现CSS模块化了，当前组件的样式只会在当前组件生效
module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:6]'] }, 
    ]
  }
 

若是想其中的某一个或者几个类的样式全局引用，只需要将用:goble()将类名括起来就可以了，例如

:goble(.head-text){
	color: red;  // 这样全局的.head-text的字体颜色都是红色的
	}
	.head-text{
	color: green;  // 这样当前组件的.head-text的字体是绿色的
	}
	// 如果以上的代码都在css文件中，那么只有当前组件的文字是绿色的，其他有.head-text的组件文字的是红色的

写好样式之后我们通过import导进来就可以了

import MyStyles from '../css/myStyle.css'