CSSModules学习 | L.Rain的博客

# 简介

# 什么是CSS Modules？

CSS 模块就是所有的类名都只有局部作用域的 CSS 文件。

定义一个普通的css文件

/* style.css */
.className {
  color: green;
}

引入css模块

import styles from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';

一张图理解CSS Modules原理： CSSModules学习_2020-04-10-16-40-15

# 为什么使用CSS Modules？

解决全局命名冲突问题 css modules只关心组件本身，命名唯一
解决选择器嵌套层次过深的问题
模块化，JS和CSS可以共享变量

# 如何使用CSS Modules？

修改webpack4配置文件webpack.config.js如下，css modules更多配置项参考css-loader (opens new window)

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: true, // 启用css modules
        },
      },
    ],
  },
};

# 命名

建议使用camelCase命名规则，但不强制，尝试以点表示法访问style.class-name时，kebab-casing可能会导致意外行为。

# 本地作用域

默认就是本地作用域：

.normal {
 color: green;
 }

或者指定本地作用域

:local(.normal) {
  color: green; 
}

css引用：

<App className={style.normal} />        // green

# 全局作用域

css文件定义

:global(.box){
  color:blue;
}

css引用：

<App className="box" />        // blue

# class组合（composes）

# 同一个css文件

/* 同一个css文件中通过composes复用类*/
.bg {
    background-color:blue;
}
.title {
    composes:bg;
    color:white;
}

# 多个css文件

/* 不同css文件中复用类*/ 
/* color.css */
.red {
    color: red;
}
.blue {
    color: blue;
}
/* index.css */
.red {
    color: red;
}
.header {
    font-size: 32px;
}
.title {
    color: green;
    composes: blue from './color.css'; // 从color.css文件中引用.blue类
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
}

# 组合全局class

.otherClassName {
  composes: globalClassName from global;
}

# 预处理器中使用

:global {
  .global-class-name {
    color: green;
  }
}

# 输入变量

# JS中引入CSS变量

/* index.scss */
$primary-color: #f40;
:export {
    primaryColor: $primary-color;
}
/* app.js */
import style from 'index.scss';
// 会输出 #F40
console.log(style.primaryColor);

# 问题

# 如何修改ui库局部样式？

在组件足外层套一个class类名，然后在内部编写global样式：

.commentList{
  :global{
    .ant-drawer-title span{
      width: 100%;
    }
  }
}