如何为Bulma CSS实现类Pico CSS的条件样式且保留原有设计？

你直接将@use "bulma"嵌套在.bulma选择器内的做法存在两个核心问题：

1. 全局样式未被作用域化：Bulma内部的全局选择器（如body、:root）不会被自动嵌套到.bulma下，仍会生成全局样式，既会和Pico CSS冲突，也无法让容器内的元素继承这些基础样式。
2. CSS变量失效：Bulma的主题颜色等变量默认定义在:root上，当组件样式被嵌套到.bulma后，内部元素无法读取全局变量，导致颜色丢失、主题异常。

步骤1：编写作用域化的Sass文件 #

创建custom-bulma.scss，通过重新定义容器内的CSS变量+嵌套导入组件的方式，将Bulma完全作用域化：

// 导入Bulma的工具函数与变量
@use "node_modules/bulma/sass/utilities/_all" as *;

// 定义Bulma样式的作用域容器
.bulma {
  // 把Bulma的主题变量重新定义到容器内部，避免全局冲突
  @each $name, $value in $colors {
    --#{$name}: #{$value};
  }
  --primary: #{color("primary")};
  --primary-invert: #{color-invert("primary")};
  --link: #{color("link")};
  --link-invert: #{color-invert("link")};
  --info: #{color("info")};
  --info-invert: #{color-invert("info")};
  --success: #{color("success")};
  --success-invert: #{color-invert("success")};
  --warning: #{color("warning")};
  --warning-invert: #{color-invert("warning")};
  --danger: #{color("danger")};
  --danger-invert: #{color-invert("danger")};

  // 复制Bulma的body基础样式到容器，确保内部元素继承基础排版
  font-family: $family-sans-serif;
  font-size: $size-16;
  line-height: $line-height;
  background-color: $scheme-main;
  color: $scheme-text;
  margin: 0;
  padding: 0;

  // 嵌套导入所有Bulma组件，样式会自动作用于.bulma容器内的元素
  @use "node_modules/bulma/sass/base/_all";
  @use "node_modules/bulma/sass/grid/_all";
  @use "node_modules/bulma/sass/elements/_all";
  @use "node_modules/bulma/sass/components/_all";
  @use "node_modules/bulma/sass/form/_all";
  @use "node_modules/bulma/sass/layout/_all";
}

步骤2：编译Sass文件 #

确保使用dart-sass（node-sass已废弃，不支持Bulma的模块系统）编译该文件，生成custom-bulma.css。

步骤3：引入样式文件 #

在HTML中先引入Pico CSS，再引入作用域化后的Bulma样式：

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

步骤4：使用作用域化的Bulma #

将需要应用Bulma样式的元素包裹在.bulma容器内：

<!-- Bulma样式区域 -->
<div class="bulma">
  <div class="notification is-primary">Bulma通知组件</div>
  <button class="button is-success">Bulma按钮</button>
</div>

<!-- Pico样式区域 -->
<article>
  <h1>Pico标题</h1>
  <button>Pico按钮</button>
</article>

• 必须使用dart-sass编译，否则无法正确处理Bulma的@use模块语法。
• 若需要自定义Bulma主题，可在导入工具模块后、定义容器前，覆盖Bulma的变量（如$primary: #ff0000;）。

内容的提问来源于stack exchange，提问作者Cyrus Justine