# 简介
# 什么是CSS Modules？
CSS 模块就是所有的类名都只有局部作用域的 CSS 文件。
定义一个普通的css文件
/* style.css */
.className {
color: green;
}
引入css模块
import styles from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';
一张图理解CSS Modules原理：
# 为什么使用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%;
}
}
}