（九）css modules

css modules 将 css模块化，让 css 也拥有模块化的特点~

特点：

1. 让 css 有自己的作用域，不会和外界命名发生冲突

2. 对 css 进行依赖管理，可通过相对路径引入 css 文件

css modules 不需要额外下载引入，只需要开启css-loader 中的modules 即可

module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[name]_[local]_[hash:base64:5]',
            sourceMap: false
          }
        }
      ]
    }]
  }

modules 开启为 true，表示启用 css-loader

localIdentName: 设置 css  类名输出规则

name：css文件名称（模块名称）

local：原本的选择器表示符，如 title、wrapper

【hash:base64:5】：表示生成5位hash值~hash值是根据模块名和标识符计算的~

生成的类名可能为：.style_title_1CFy6

引入：

import style from './style.css'

html 标签：

<div class={style.title}>title</div>