• css-loader 提供了一种叫做 CSS Modules 的方案，可以帮我们自动生成唯一的类名，不会和其他模块的命名出现冲突
  • 要使用 CSS Modules 有几个步骤，首先需要在 webpack 的配置文件中打开相关的配置 
{
   
  test: /\.less$/,
  include: path.resolve('./src'),
  use: [
    MiniCssExtractPlugin.loader,
    {
   
      loader: 'css-loader',
      options: {
   
        modules: {
   
          localIdentName: '[local]-[hash:5]'
        }
      }
    },
    'less-loader'
  ]
}

上面配置的意思是我们对 src 下面的 .less 文件启用 modules 转换，转换的格式模板为 [local]-[hash:5]，其中 hash 是根据文件名和类名确定的，所以不会冲突，因为 CSS Modules 会改变输出的类名，我们只能对自己写的代码进行适配。
经过上面的配置之后，我们在代码中导入的 less 文件返回的就是一个键值对了，其中键名是原始的类名或 ID 名，键值就是转换输出之后的名字，如：

{
   
  btns: "btns-bdd41",
  body: "body-dab49"
}

所以我们就不能在 JSX 中填写固定的类名了，需要使用变量的方式，如下

import * as React from 'react'
import style from './style.less'

export default class Main extends React.Component {
   
  render() {
   
    return (
      <div className={
   style.body}>
        <div className={
   style.btns}></div>
      </div>
    )
  }
}

CSS Modules 会转换所有的类名和 ID 名，如果有些名字我们不想让它转换，可以使用 :global()，如：

:global(#app) {
   
  background-color: #f4f4f4;
}