css namespace 命名空间

[Leovenn]

About styles 🛠️

我看了下文档，目前的root css变量好像没有前缀，可以增加自定义前缀吗？

有这个功能需求是因为使用的微前端框架，主应用想使用varlet 但是子应用也使用了varlet的话 会影响样式

[haoziqaq]

意思是主应用和子应用可能是两套不一样的主题样式么？如果是这样的话建议是用 style provider组件去在一个作用域范围定义样式。

…

---原始邮件--- 发件人: ***@***.***> 发送时间: 2025年7月1日(周二) 下午3:29 收件人: ***@***.***>; 抄送: ***@***.***>; 主题: [varletjs/varlet] css namespace 命名空间 (Issue #1913) Leovenn created an issue (varletjs/varlet#1913) About styles 🛠️ 我看了下文档，目前的root css变量好像没有前缀，可以增加自定义前缀吗？ 有这个功能需求是因为使用的微前端框架，主应用想使用varlet 但是子应用也使用了varlet的话 会影响样式 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Leovenn]

意思是主应用和子应用可能是两套不一样的主题样式么？如果是这样的话建议是用 style provider组件去在一个作用域范围定义样式。
…

我在使用微前端 京东的micro-app ，他没法隔离 root 类的全局样式

举个例子 假如我主应用使用的是varlet 3.0 子应用使用的是2.0

3.0中有一套 :root 变了和 2.0 中 冲突了，没法解决

--font-size-xs 在主应用中是 12px 但是子应用是 14px

又或者 子应用没有使用varlet 但是他定义了一个变量叫--font-size-xs 因为很常见 ，这样也会冲突

varlet 变量是不是可以增加一个前缀 例如 --var-font-size-xs，而且可以自定义这个前缀 例如 --my-font-size-xs 想element plus那样

[haoziqaq]

未来加前缀是可以的，但是感觉这是一个影响面较大的破坏性变更，可能不适合在 minor 版本中进行。
如果后续升级 major 版本我们会这么做的，但短期内我们暂无升级 major 的计划，我这里可以给你一个临时解决方案以供尝试。

假设你在 vite 环境下：
你可以写一个插件，利用 vite 插件的 transform 钩子 将来自 varlet 的所有文件的 css 变量 通过正则匹配插入你自定义的 namespace 前缀，从而改变整个构建产物。

[Leovenn]

好的 感谢回复 也感谢您一直坚持为开源社区做贡献

…

---- 回复的原邮件 ---- | 发件人 | ***@***.***> | | 发送日期 | 2025年07月01日 19:11 | | 收件人 | varletjs/varlet ***@***.***> | | 抄送人 | Leoven ***@***.***>, Author ***@***.***> | | 主题 | Re: [varletjs/varlet] css namespace 命名空间 (Issue #1913) | haoziqaq left a comment (varletjs/varlet#1913) 未来加前缀是可以的，但是感觉这是一个影响面较大的破坏性变更，可能不适合在 minor 版本中进行。 如果后续升级 major 版本我们会这么做的，但短期内我们暂无升级 major 的计划，我这里可以给你一个临时解决方案以供尝试。 假设你在 vite 环境下： 你可以写一个插件，利用 vite 插件的 transform 钩子 将来自 varlet 的所有文件的 css 变量 通过正则匹配插入你自定义的 namespace 前缀，从而改变整个构建产物。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>