CSS Modules support in Astro - Mini Project: Build & Apply

Using CSS Modules in Astro Components

📖 Scenario: You are building a simple Astro website. You want to style a component using CSS Modules to keep styles scoped and avoid conflicts.

🎯 Goal: Create an Astro component that uses CSS Modules for styling. You will set up the CSS module file, import it, and apply styles to HTML elements inside the component.

📋 What You'll Learn

Create a CSS module file with specific class names

Import the CSS module in the Astro component

Use the imported styles object to apply classes to HTML elements

Ensure styles are scoped and do not leak globally

💡 Why This Matters

🌍 Real World

CSS Modules help keep styles scoped to components, avoiding conflicts in larger Astro projects with many components.

💼 Career

Understanding CSS Modules is important for front-end developers working with modern frameworks like Astro, React, or Vue to write maintainable and modular CSS.

1

Create CSS Module File

Create a CSS module file named Button.module.css with a class button that sets background-color to #007acc and color to white.

Astro

/* Create Button.module.css with .button class */
/* Your code here */

Hint

Use a CSS file named exactly Button.module.css. Define a class .button with the given styles.

2

Import CSS Module in Astro Component

In a new Astro component file named Button.astro, import the CSS module Button.module.css as styles.

Astro

---
// Import the CSS module here
// Your code here
---

Click me

Hint

Use import styles from './Button.module.css'; inside the frontmatter section ---.

3

Apply CSS Module Class to Button

In Button.astro, apply the CSS module class button to the <button> element using class={styles.button}.

Astro

---
import styles from './Button.module.css';
---

Click me  

Hint

Use class={styles.button} inside the <button> tag to apply the scoped style.

4

Use Button Component in a Page

Create a new Astro page index.astro that imports the Button component and uses it inside the main content.

Astro

---
import Button from '../components/Button.astro';
---


  
  

Hint

Import Button from the correct path and use <Button /> inside the <main> tag.