@alicloudfe/build-plugin-fusion-css

@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

示例

Teamix 业务组件隔离示例