@alicloudfe/build-plugin-fusion-css
v1.0.5
Published
用于修改fusion css-prefix & css-variable作用域
Downloads
18
Readme
@alicloudfe/build-plugin-fusion-css
build-scripts 插件,用来修改 fusion-based 组件库的 css 的选择器类名前缀& css-variable 作用域。比如:.next-btn
=> .my-prefix-btn
、:root
= .my-custom-scope
。
这样做的目的是,控制 fusion 样式的作用范围,让一个页面中可以同时存在多份不同版本的 fusion 样式或者不同主题,同时不会出现样式冲突。
如何使用
在 build-json
文件中引入 @alicloudfe/build-plugin-fusion-css
:
...
"plugins": [
...,
["@alicloudfe/build-plugin-fusion-css"]
]
自定义样式类名前缀
在源代码引入组件库样式时,比如混合云主题样式,通过在后面加上?fusionPrefix=.my-prefix
实现:
import '@alicloudfe/components/dist/hybridcloud-no-var.css?fusionPrefix=.custom-prefix-';
它的作用是对这个 css 文件中的 CSS 选择器进行转换,把 .next-btn
的类名修改成 .my-prefix-btn
。从而限制 fusion 组件样式作用范围,避免多份 fusion 同时存在时出现样式冲突。
自定义 css-variale 作用域
如果想要更改主题变量,我们可以通过在 "@alicloudfe/build-plugin-fusion-css"
添加配置项来实现:
...
"plugins": [
...,
["@alicloudfe/build-plugin-fusion-css", {
"oldSelector": ".theme-hybridcloud",
"newSelector": ".custom-scope"
}]
]
然后在源代码引入主题变量的时候后面加上 ?customVarScope
即可:
import '@alicloudfe/components/dist/hybridcloud-var.css?customVarScope';
它的作用是将这个 css 文件中的所有 oldSelector
选择器转换成 newSelector
。从而限制该主题的 css-variable 作用范围,避免多份主题同时存在时出现样式冲突。
其中 oldSelector
默认值为 :root