css-module.md

css module

为什么要有css module

现在的react vue等mvvm单页面架构，最终打包的时候css都打在一个js或者一个css里面，非常容易出现css class冲突，为了解决这个问题出现了css module

css module如何解决冲突

配置css module后，编译出的html文件每个class都会加上一个唯一的hash值，假如在两个组件都写了class title，最后编译出的html里class是index__title__18nSI 及class="index__title__899ndd" 这种，这样就解决了同名class title的冲突。

css module如何配置

• 对于vue 直接用 <style lang="stylus" scoped>
• 对于react要自己配置webpack，如下

{
  test: /\.css$/,
  // 不包括node_modules里的css
  exclude: [resolve('../node_modules')],
  use: ['style-loader', {
    loader: 'css-loader',
    options: {
      importLoaders: 1,
      // css modules支持
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
    }
  }]
},
{
  test: /\.less$/,
  // 不包括node_modules里的less
  exclude: [resolve('../node_modules')],
  use: ['style-loader', {
    loader: 'css-loader',
    options: {
      importLoaders: 1,
      // less modules支持
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
    }
  }, 'less-loader']
},

css module如何应用

• 在react js文件中import styles from './index.less', 在jsx中<div className={styles.title}>
• 在index.less中写

.title {
  padding: 0 0 20px;
  border-bottom: 1px solid #eee
}

• 这个title会加上hash值 实际的class是class="index__title__xxxx111"这样，这样即使在其他组件也写<div className={styles.title}>，那其他组件的class会编译成class="index__title__xxxx222"，这样任意一个组件都可以用class title而不会有冲突了
• 如果一个dom要加多个class，那<div className={`${styles.logo} ${styles.abc}`}>这样写
• 如果要用全局class不带hash的在jsx中<div>className="notAssignedCustomerTable"</div>，less写法如下

// 全局css设置 用的是普通的className="notAssignedCustomerTable"
:global {
  .notAssignedCustomerTable {
    .ant-table-thead {
      .ant-table-selection-column {
        span{
          display: none
        }
      }
    }  
  }
}