如何为 Bulma CSS 创建条件样式，类似于 Pico CSS，而又不丢失 Bulma 的设计？

Question

我正在尝试为 Bulma CSS 实现条件样式，类似于 Pico CSS 处理它的方式（https://picocss.com/docs/conditional）。我的目标是将 Bulma 样式范围限定为具有特定类的元素，使我能够在同一个项目中同时使用 Pico CSS 和 Bulma，而不会发生冲突。

但是，当我实现此范围界定时，生成的 CSS 与原始 Bulma 设计不匹配。颜色缺失，整体主题偏离。

这是我尝试过的：

1. 创建了一个自定义 Sass 文件 (custom-bulma.scss) 以导入 Bulma 组件并将它们包装在 .bulma 类中：

.bulma {
  @use "node_modules/bulma/bulma";
}

2. 将此 Sass 文件编译为 CSS，并在 Pico CSS 之后将其包含在我的 HTML 中：

<!--link rel="stylesheet" href="path/to/pico.min.css"-->
<link rel="stylesheet" href="path/to/custom-bulma.css">

3. 使用 .bulma 类将 Bulma 风格的元素包装在容器中：

<div class="bulma">
  <!-- Bulma-styled elements here -->
</div>

尽管进行了这些尝试，输出的 CSS 在设计和主题方面与原始的 bulma.min.css 不匹配。颜色缺失，整体外观不佳。

我错过了什么？如何在不丢失其原始设计和主题的情况下将布尔玛风格范围限定到特定类别？

任何帮助或见解将不胜感激！

Answer 1

在一个Web应用程序中使用两个或多个不同的前端框架是否正确？

https://www.reddit.com/r/webdev/comments/p24mtp/is_it_a_good_idea_or_a_bad_idea_to_use_multiple/?rdt=46975