React的CSS模块化（class和className）

1、外部引用需要使用className，react默认不支持class。

如果想使用传统的class来获取样式，需要下载安装react-html-attrs插件。

npm install babel-plugin-react-html-attrs --save-dev

2、安装完成之后
<1>在package.json文件里面存在如下配置

"devDependencies": {
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-react-html-attrs": "^2.1.0",
    "prop-types": "^15.7.2"
  }

<2>在webpack.config.js大概380行左右的位置加入 'react-html-attrs’
如图：

plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent:
                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                        },
                      },
                    },
                  ],
                    'react-html-attrs' //解决className问题
                ],

然后重启项目。

3.React是单页面应用，引用CSS样式默认都是全局的，这样会引起样式冲突，降低性能。
Vue里面的解决方案是使用scoped：

<style scoped>
</style>

react里面需要配置webpack.config.js解决:

（1）版本2.*.*
**第一种（官方）：
{
	test:cssModuleRegex,
	use:getStyleLoaders({
		importLoaders:1,
		sourceMap:isEnvProduction && shouldUseSourceMap,
		//开启模块化
		modules:true, 
		//getLocalIdent:getCSSModuleLocalIdent,
		//显示路径：
		localIdentName:'[local]_[hash:base64:6]'//[path]-[name]-[local]-[hash:base64:6]
	}),
},
**第二种
{
	test:cssRegex,
	//exclude:cssModuleRegex,
	use:getStyleLoaders({
		importLoaders:1,
		sourceMap:isEnvProduction && shouldUseSourceMap,
		//开启模块化
		modules:true, 
		//getLocalIdent:getCSSModuleLocalIdent,
		//显示路径：
		localIdentName:'[local]_[hash:base64:6]'//[path]-[name]-[local]-[hash:base64:6]
	}),
	exclude:[//排除这两个文件夹下面的css文件
		path.join(__dirname,'..','node_modules')
		path.join(__dirname,'..','src/assets/css/common')
	],
},
（2）版本3.*.*，modules:true改为module:{}
**第一种(官方)：
{
	test:cssModuleRegex,
	use:getStyleLoaders({
		importLoaders:1,
		sourceMap:isEnvProduction && shouldUseSourceMap,
		//开启模块化
		modules:{
			//显示路径：
			localIdentName:'[local]_[hash:base64:6]'//[path]-[name]-[local]-[hash:base64:6]
		},
	}),
},
**第二种
{
	test:cssRegex,
	//exclude:cssModuleRegex,
	use:getStyleLoaders({
		importLoaders:1,
		sourceMap:isEnvProduction && shouldUseSourceMap,
		//开启模块化
		modules:{
			//显示路径：
			localIdentName:'[local]_[hash:base64:6]'//[path]-[name]-[local]-[hash:base64:6]
		},
	}),
	exclude:[//排除这两个文件夹下面的css文件
		path.join(__dirname,'..','node_modules')
		path.join(__dirname,'..','src/assets/css/common')
	],
},
第三种：sassModuleRegex也要修改，同上

---

应用：

import Css from "./style.module.css";
class A extends Component{
	render(){
		return(
			<div className={Css["app"] + " " + Css["active"]}>//模块化
				......
			</div>
		)
	}
}