webpack配置cssModules 适用于.css或者.less文件

.css文件的配置
{
  test: /\.css$/,
  include:path.resolve(__dirname,'../src/css文件路径')
  //上面的include配置项是为了避免引入的第三方css库如Ant Design中的css也被cssModules重新编译为我们定义的localIdentName格式，这样就会导致第三库的样式错乱，不能与第三方库的组件相匹配。如果webpack中配置有 cssModuleRegex(专门用于检测是不是从node_module中引入的第三方css样式)
  {
              test: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              }),
            }，那么不需要配置include了。
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]'
      }
    }
  ]
}

localIdentName解释：[path]是指的css文件的路径，[name]指的是css文件的名字，[local]指的是css中每个类自己的类名
cssModules只会对类名或者id选择器进行编译，记住id选择器也是可以编译的，编译后生成新的id选择器，#放在编译后的名字的最前边，不会标签选择器等css选择器进行编译。
如果上边的对象中写了include参数，那么还需要再写一个同样的css-loader，加入参数exclude,目的是为了把其他的不需要cssModules编译的css文件进行常规处理，转换到style标签中或者是单独抽离出来，否则其他的css文件不会通过cssloader进行编译，也就不会出现在页面中。即：
rules:
[
{
test: /.cssKaTeX parse error: Expected group after '_' at position 27: …e:path.resolve(_̲_dirname,'../sr…/,
exclude:path.resolve(dirname,’…/src/css文件路径’),//排除需要cssModules处理的css文件夹，将其他文件夹中的css正常进行css-loader编译
use: [
{
loader: ‘css-loader’,//去除cssModules的options参数配置
}
]
}
]
.less文件的配置
上述是对.css文件配置的，如果想对.less文件配置，那么就在/.lessKaTeX parse error: Can't use function '\.' in math mode at position 93: … test : /\̲.̲less/,
use : [{
loader : ‘style-loader’,
}, {
loader : ‘css-loader’, // translates CSS into CommonJS
{
loader: ‘css-loader’,
options: {
modules: true,
localIdentName: '[path][name][local]–[hash:base64:5]’
}
}
}, {
loader : ‘less-loader’, // compiles Less to CSS
}],
},