如何在Astro中仅为单个组件引入Bulma样式而不影响全局？

方法一：用Sass嵌套隔离Bulma样式（推荐） #

Bulma基于Sass开发，我们可以按需导入需要的模块，并将所有样式嵌套在组件根容器的类名下，确保样式仅作用于当前组件内部：

1. 若项目未安装Sass，先执行npm install sass安装依赖
2. 修改ArticleList.astro代码：

---
// 不再直接导入整个bulma，改用Sass按需引入模块
---
<!-- 给根容器添加唯一类名，用于嵌套Bulma样式 -->
<div class="article-list-bulma-wrapper">
  <!-- 此处放置推文列表，直接使用Bulma类名，比如.card、.media等 -->
  <div class="card">
    <div class="card-content">
      <!-- 推文内容 -->
    </div>
  </div>
</div>

<style lang="scss">
.article-list-bulma-wrapper {
  // 按需导入Bulma基础工具类和组件样式，可根据需求增减
  @import "bulma/sass/utilities/_all.sass";
  @import "bulma/sass/base/_all.sass";
  @import "bulma/sass/components/card.sass";
  @import "bulma/sass/components/media.sass";
}
</style>

所有Bulma样式会被限定在.article-list-bulma-wrapper容器内，不会影响项目其他组件。

方法二：使用Shadow DOM隔离样式 #

Astro组件支持开启Shadow DOM，开启后组件内的样式会完全隔离，既不会污染全局，也不受外部样式影响：
修改ArticleList.astro：

---
// 直接导入Bulma CSS文件
import '../../node_modules/bulma/css/bulma.css';
---
<!-- 你的推文列表内容 -->
<div class="card">
  <!-- 具体内容 -->
</div>

<script>
  // 开启Shadow DOM实现样式隔离
  this.attachShadow({ mode: 'open' });
</script>

注意：开启Shadow DOM后，组件内的资源（如图片、字体）路径可能需要调整，且父组件样式无法渗透到组件内部，适合完全独立的组件场景。

方法三：手动提取需要的Bulma样式 #

若不想使用Sass，可直接从Bulma的CSS文件中提取你需要的样式片段（比如卡片、元素框相关代码），将其放在组件的<style>标签里，并嵌套在组件根容器的类名下，同样能实现样式隔离。

内容的提问来源于stack exchange，提问作者Pedro Ortiz