[Question]如何覆盖meet的css变量

[xmsz]

背景

• 我在global里写:root {...} ， 但是优先级比meet原生的低
• 我得在每个文件去声明才有效

[lianmin]

你需要在引入 meet 之后， 统一再覆盖

[xmsz]

你需要在引入 meet 之后， 统一再覆盖

我是在global.scss里写

@import './assets/css/reset.scss';
@import '@alifd/meet/es/core/index.css';

:root {
  --button-medium-corner: 100rpx;
}

但是没有效果

[SoloJiang]

看下最终打包出来的 css 文件

[xmsz]

看下最终打包出来的 css 文件

打包出来的看起来好像没问题

这是demo https://github.com/xmsz/act-20211206

[xmsz]

就是打包出来的文件没问题 但是实际表现还是优先级比meet低 没有细看不确定原因

[SoloJiang]

是不是权重影响的

[lianmin]

在 global 里没效果，必须要用 import 的方式在 jsx 里引入

[lianmin]

[xmsz]

ok 就是每个页面都要引入是吗

[SoloJiang]

是的

[xmsz]

感觉还是有点麻烦 我现在是

global.scss引入@alifd/meet/es/core/index.css，这个没什么问题，并且每个页面都有组件样式

然后我想要替换css变量，比如

:root{
  --button-medium-corner: 100px;
  --color-brand-3: #00d477;
}

然后，如果我在global.scss写，只会生效--color-brand-3 然后我修改优先级

* {
  --button-medium-corner: 100px;
  --color-brand-3: #00d477;
}

然后，如果我在global.scss写，只会生效--button-medium-corner

我必须要要手动在每个页面里写import '../var.css'，才行。有点麻烦

有没有其他简单一点方式可以替换变量

我现在临时是写成

:root {
  --color-brand-3: #00d477;
}

* {
  --button-medium-corner: 100px;
}

``