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'] } 複製代碼