CSS imports per route in Remix - Mini Project: Build & Apply

CSS Imports Per Route in Remix Framework

📖 Scenario: You are building a simple website using Remix Framework. Each page (route) should have its own CSS file to keep styles organized and only load the styles needed for that page.

🎯 Goal: Create two routes, index and about, each with its own CSS file. Import the CSS files correctly so that each route loads only its own styles.

📋 What You'll Learn

Create a CSS file named index.css with a background color style

Create a CSS file named about.css with a different background color style

Create a route file index.jsx that imports index.css

Create a route file about.jsx that imports about.css

💡 Why This Matters

🌍 Real World

Websites often have multiple pages with different styles. Loading only the CSS needed for each page keeps the site fast and organized.

💼 Career

Front-end developers use route-based CSS imports to optimize styling and performance in modern web frameworks like Remix.

1

Create index.css with background color

Create a CSS file named index.css with a body selector that sets the background color to #e0f7fa.

Remix

/* Your code here */

Hint

Use the body selector and set background-color to #e0f7fa.

2

Create about.css with background color

Create a CSS file named about.css with a body selector that sets the background color to #fff3e0.

Remix

/* Your code here */

Hint

Use the body selector and set background-color to #fff3e0.

3

Create index.jsx route importing index.css

Create a React component in index.jsx that imports index.css using import "./index.css"; and exports a default function Index returning a <main> with text Home Page.

Remix

/* Your code here */

Hint

Use import "./index.css"; and create a function Index that returns <main>Home Page</main>.

4

Create about.jsx route importing about.css

Create a React component in about.jsx that imports about.css using import "./about.css"; and exports a default function About returning a <main> with text About Page.

Remix

/* Your code here */

Hint

Use import "./about.css"; and create a function About that returns <main>About Page</main>.