css Modules 笔记

css Modules 笔记

通过对样式文件进行预编译, 为每个类生成独一无二的类名, 保证名称的唯一性

import React from "react";
import style from "./App.css";export default () => {return (<h1 className={style.title}> // 以对象形式传值Hello World</h1>);
};

• webpack 中配置

loader: "style-loader!css-loader?modules"; // 结尾添加modules 表示开启CSS Modules功能

显式局部写法和全局作用域

:global(.className)

/* title会在被引入时映射为对象的属性名, 类名会被编译为唯一的hash名 */
.title{
    font-size: 16px
}
/* 等同于上面的写法 */
:local(.title){
    font-size: 16px
}/* 类名不会被编译 */
:global(.title) {
    font-size: 16px;
}

定制哈希类名

• 在 webpack 中配置

  loader: “style-loader!css-loader?modules&localIdentName=[path][name]—[local]—[hash:base64:5]”
  类名被编译成 demo03-components-App—title—GpMto

继承另一个选择器的规则

• composes

.title {
    font-size: 16px;
}
/* 直接继承文件内的规则 */
.className {
    composes: title;color: "#cccccc";
}/* 继承外部文件的规则 */
.className {
    composes: title from "./title.css";
}