css模块化配置---webpack4+less

目的

局部组件引入局部css样式,实现css模块化开发; 减免全局污染

操作

• 启用css modules

  {
      loader: 'css-loader',
      options: {
          modules: true,
          localIdentName: '[local]___[hash:base64:5]'
      }
  }
  

  modules: true,启用模块化

  localIdentName: '[local]___[hash:base64:5]',按照给定算法所生成的样式类名.有效避免类名重复

• 使用css modules

1. 局部模式--:local

/* index.less */
.divContainer {                              :local(.divContainer) {
    background: #fff;       等价于                background: #fff;  
}                                             }

/* xx.jsx*/
import styles from './index.less';  // 引入局部less文件
<div className={styles.divContainer}>...</div>  // 将类名绑定在元素上


/*最后生成文件中对应的样式类名*/
<div class="divContainer___34Uoz">... </div> 

2. 全局模式--:global

:global {
  .divContainer {                            :global(.divContainer) {
    background: #fff;      等价于                  background: #fff;
  }                                          }
}

• 注意事项

避免转换引入插件中的css样式

{
/*webpack.config.js*/

// 对于node_modules文件夹以外的less文件, 开启css module模式
    test: /\.less?$/,
    exclude: /node_modules/,
    use: [MiniCssExtractPlugin.loader, {
        loader: 'css-loader',
        options: {
            modules: true,
            localIdentName: '[local]___[hash:base64:5]'
        }
    }, 'postcss-loader', {
        loader: 'less-loader',
        options: {
            modifyVars: theme
        }
    }]
},

// 对于node_modules中的less文件,不开启css module模式
{
    test: /\.less?$/,
    include: /node_modules/,
    use: [MiniCssExtractPlugin.loader, css-loader, 'postcss-loader',  less-loader']
}