前言

之间在react中一直用的普通的引入css，觉得挺好用的，也没出现过什么问题，最近才开始用css模块

1. 它会给css自动添加一些后缀的东西，可以有效避免全局冲突，覆盖其他地方的样式
2. 实现模块化可以多次使用，webpack也可以选择不编译没有使用到的css

《css模块化及CSS Modules使用详解》

webpack配置

     {
        test: /\.css$/,
        include: resolve('src'),
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(scss|sass)$/,
        include: resolve('src'),
        use: [
          'style-loader',
          // 模块化的sass
           {
             loader: 'css-loader',
             options: {
               modules: true,// 开启模块化
               locaIdentName: '[name]-[local]-[hash:base64:6]'
             }
          },
          'sass-loader',
          'postcss-loader' // autoprefixer
        ]
      }

使用

基本写法和css类似，使用方法有点不一样

local

// normal.less
.normal{} // 写法1
:local(.normal){} // 写法2

// normal.js
import styles from 'normal.less'
<div className={styles.normal}></div>
// 添加多个样式可以拼接字符串，styles.normal本质是编译过后的字符串

global

// normal.less
:global(.normal){}

// normal.js
import styles from 'normal.less'
<div className='normal'></div>
// 添加多个样式可以拼接字符串，styles.normal本质是编译过后的字符串

总结

    其实明白了原理就知道具体用法了

1. 模块化其实就是对类名进行修改，添加一些后缀，styles.normal本质上是一个字符串，只不过是添加后缀之后的新类名，具体规则建议了解BEM命名规范
2. 而模块化的编译原理就是对:local的编译，:global是不会被编译，同时也不能通过styles获取，只能字符串书写。