Css Modules 小试

jspeng

日常学习

发布于：2017年11月11日

定义

一个css模块即一个定义好了所有样式（类）和动画名称的本地css文件

官方推荐仅使用类来定义样式

CSS Modules 会编译成一种低层级的ICSS，但它的格式与正常css格式相似

1
2
3
4

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

当使用js模块导入css模块时，它输出一个属性与本地样式名称相对应的对象

1
2
3

import styles from './style.css';

element.innerHTML = '<div class="' + styles.className + '">';

命名

对于本地类名建议使用驼峰命名，但并非强制

关于使用驼峰命名的方式主要是为了更好在js中导入并使用css模块

可以为css-loader增加camelCase参数来实现自动转换

1
2
3
4

{
    test: /\.css$/,
    loader: 'style!css?modules&camelCase',
}

作用域

:global: 切换到当前选择器所在全局作用域下
:local: 切换到局部作用域下

如果切换到全局模式下，定义的样式将允许在全局作用域中使用

Example:

1

localA :global .global-b .global-c :local(.localD.localE) .global-d

组合

用于组合其它选择器

1
2
3
4
5
6
7
8
9

.className {
    color: green;
    background: red;
}

.otherClassName {
    composes: className;
    color: yellow;
}

允许拥有多个组成规则，但组成规则必须先于其它规则。当一个类composes另外一个类时，css模块对外的接口为当前类名，允许添加多个类名。

组成规则允许使用多个类：composes: classNameA classNameB

依赖

允许compose其它CSS Modules的类名

1
2
3

.otherClassName {
    composes: className from './style.css';
}

注意：

1. 当从不同的文件composes多个类时，compose的顺序是不确定的，因此，需要确保composes的类没有定义相同的属性值
2. compose不应该循环嵌套，因为Elsewise是无法确定这是组成规则还是属性，模块系统将会发出一个错误。
3. 最好的方式就是基本类与依赖分离

为什么使用CSS Modules

模块化和可重复使用的css

• 解决命名冲突
• 显式依赖
• 没有全局作用域

编译结果

• 默认为哈希字符串
• 允许自定义配置

更新于：2017年11月11日

css

Css Modules