css-modules-name
基于css-loader(modules)
webpack 开启modules配置
``
loader: "css-loader",
options: {
modules: {
auto: true,
localIdentName: "[local]--[hash:base64:5]"
}
}
`
$3
`
import cssModules, { coat } from "css-modules-name"
``
API
cssModules(modules?: Stylesheet | Stylesheet[], options?: {cache?: boolean, unused?: boolean})
>* modules: 传入单个样式表对象或者样式表对象数组集合
>* config.cache: 是否启用缓存
>* config.unused 是否保留未使用的类名
>* 返回classnames函数
classnames(names: string | object | Array)
>* classnames("#container") 前置#代表为混合类名,解析为"container container-hash"
>* classnames("!container") 前置!代表为全局类名, 解析为 "container"
>* classnames("container") 解析为 "container-hash5"
>* classnames("#container !flex card",{active: true, show: false}, ["#visible"]) 解析为 "container container-hash flex active-hash visible visible-hash"
coat(names: string | object | Array)
该函数为包裹函数,将所有类名包裹为全局类名