react的css模块化

修改webpack.config.js文件：

const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

moule.exports = function(webpackEnv){
	const isEnvDevelopment = webpackEnv === 'development';
	...
		// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
		// using the extension .module.css
		{
		  test: cssModuleRegex,
		  use: getStyleLoaders({
		    importLoaders: 1,
		    sourceMap: isEnvProduction && shouldUseSourceMap,
		    modules: {
		      /**css modules:具有如下参数： css模块化
		       * 1.getLocalIdent:默认为getCSSModuleLocalIdent，用function自定义生成的类名。
		       * 2.localIdentName:默认未定义，可以自定义类名的模板，如[path]_[name]_[local];
		      */
		      // getLocalIdent: getCSSModuleLocalIdent, //默认方式
		      localIdentName:isEnvDevelopment ? "[path]_[name]_[local]" : "[hash:base64:5]"
		    },
		  }),
		},
		// Opt-in support for SASS (using .scss or .sass extensions).
		// By default we support SASS Modules with the
		// extensions .module.scss or .module.sass
		{
		  test: sassRegex,
		  exclude: sassModuleRegex,
		  use: getStyleLoaders(
		    {
		      importLoaders: 2,
		      sourceMap: isEnvProduction && shouldUseSourceMap,
		    },
		    'sass-loader'
		  ),
		  // Don't consider CSS imports dead code even if the
		  // containing package claims to have no side effects.
		  // Remove this when webpack adds a warning or an error for this.
		  // See https://github.com/webpack/webpack/issues/6571
		  sideEffects: true,
		},
		// Adds support for CSS Modules, but using SASS
		// using the extension .module.scss or .module.sass
		{
		  test: sassModuleRegex,
		  use: getStyleLoaders(
		    {
		      importLoaders: 2,
		      sourceMap: isEnvProduction && shouldUseSourceMap,
		      modules: {
		        // getLocalIdent: getCSSModuleLocalIdent,
		        localIdentName:isEnvDevelopment ? "[path]_[name]_[local]" : "[hash:base64:5]"
		      },
		    },
		    'sass-loader'
		  ),
		},
		{
		  test: lessRegex,
		  exclude: lessModuleRegex,
		  use: getStyleLoaders(
		    {
		      importLoaders: 2,
		      sourceMap: isEnvProduction && shouldUseSourceMap,
		    },
		    'less-loader',
		    {
		      modifyVars: {
		        'primary-color':'#007DB9', //主题色
		        'layout-header-background': '#1B2B56',
		        'layout-body-background': 'rgb(237, 237, 237)',
		        "success-color": "#20BF80", // 成功色
		        "warning-color": "#e6AA32", // 警告色
		        "error-color":"#EB5758",// 错误色
		        // @primary-color: #1890ff; // 全局主色
		        // @link-color: #1890ff; // 链接色
		        // @success-color: #52c41a; // 成功色
		        // @warning-color: #faad14; // 警告色
		        // @error-color: #f5222d; // 错误色
		        // @font-size-base: 14px; // 主字号
		        // @heading-color: rgba(0, 0, 0, 0.85); // 标题色
		        // @text-color: rgba(0, 0, 0, 0.65); // 主文本色
		        // @text-color-secondary : rgba(0, 0, 0, .45); // 次文本色
		        // @disabled-color : rgba(0, 0, 0, .25); // 失效色
		        // @border-radius-base: 4px; // 组件/浮层圆角
		        // @border-color-base: #d9d9d9; // 边框色
		        // @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
		
		        // or
		        'hack': `true; @import '${require('path').resolve(__dirname, '../src')}/css/antd-less-reset';`, // Override with less file
		      },
		      javascriptEnabled: true,
		    }
		  ),
		  // Don't consider CSS imports dead code even if the
		  // containing package claims to have no side effects.
		  // Remove this when webpack adds a warning or an error for this.
		  // See https://github.com/webpack/webpack/issues/6571
		  sideEffects: true,
		},
		// Adds support for CSS Modules, but using less
		// using the extension .module.scss or .module.less
		{
		  test: lessModuleRegex,
		  use: getStyleLoaders(
		    {
		      importLoaders: 2,
		      sourceMap: isEnvProduction && shouldUseSourceMap,
		      modules: {
		        // getLocalIdent: getCSSModuleLocalIdent,
		        localIdentName:isEnvDevelopment ? "[path]_[name]_[local]" : "[hash:base64:5]"
		      },
		    },
		    'less-loader'
		  ),
		},
}

设置完localIdentName之后，在开发环境，在浏览器中定位元素的类名时，就可以明确找到属于哪个路径下的哪个文件下的哪个类名。在生产环境使用hash:base64:5,方便压缩类名，生产环境考虑包体积和代码混淆，要做类名做一个生产环境的压缩。如下图所示：
使用默认方式：getLocalIdent:getCSSModuleLocalIdent后生成的类名

使用自定义的方式：localIdentName:[path] _ [name] _ [local]