0

I'm developing a test project in Astro for the first time and I have a problem with the import index, basically I would like to show a list of tweets like in this example of the bulma framework:

Example of the element box on bulma

The problem is that I don't want to import the entire Bulma framework into my application, I just want this component to have this style, is there any way to import Bulma just for the tweets list component?

This is my code block referring to imports in the index.astro file:

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

And this is my code block referring to imports in the ArticleList.astro file, :

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

When accessing the index.astro in the browser, now the whole project has the Bulma style, is there a way to avoid this and make only the ArticleList.astro component have this style?

Pedro Ortiz
  • 1
  • 1

1 Answers1

0

You can scope css from a module to a component using a <style> tag with @import like this:

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

Note: This is a sass stylesheet, you will also have to install sass using npm i sass

List of Bulma component styles

Bryce Russell
  • 647
  • 3
  • 8