如何将 css 样式应用于 Astro 中的一个组件而不影响导入该组件的索引？

Question

我第一次在 Astro 中开发一个测试项目，我遇到了导入索引的问题，基本上我想显示一个推文列表，就像 bulma 框架的这个例子一样：

问题是我不想将整个 Bulma 框架导入到我的应用程序中，我只想让这个组件具有这种样式，有没有办法只为推文列表组件导入 Bulma ？

这是我的代码块，引用了index.astro 文件中的导入：

---
import Layout from '../layouts/Layout.astro';
import ArticleList from '../components/ArticleList.astro';
import Introduction from '../components/Intoduction.astro';
import Navbar from '../components/Navbar.astro';
---

这是我的代码块，引用了 ArticleList.astro 文件中的导入，:

---
import '../../node_modules/bulma'
---

在浏览器中访问index.astro时，现在整个项目都是Bulma风格，有没有办法避免这种情况，只让ArticleList.astro组件有这种风格？

Answer 1

您可以使用带有

<style>

的

@import

标签将 css 从模块范围限制到组件，如下所示：

<style>
  @import "bulma/sass/components/card.sass";
</style>

注意这需要sass才能工作，你可以使用

npm i sass

安装它