Per-route CSS when using FileRoutes

If I want to have a CSS file for an individual route (i.e. that route has unique page flow compared to others), where should I put the CSS file? It seems incredibly inconvenient to have CSS files in a separate folder.

// routes/index.tsx
import "./index.css"; // Where should this file be?!

export default function Home() {
  return (
    <main>
      <div class="hero">...</div>
    </main>
  );
}

// routes/index.tsx
import "./index.css"; // Where should this file be?!

export default function Home() {
  return (
    <main>
      <div class="hero">...</div>
    </main>
  );
}

// routes/index.tsx
import "./index.css"; // Where should this file be?!

export default function Home() {
  return (
    <main>
      <div class="hero">...</div>
    </main>
  );
}

// routes/index.tsx
import "./index.css"; // Where should this file be?!

export default function Home() {
  return (
    <main>
      <div class="hero">...</div>
    </main>
  );
}

Per-route CSS when using FileRoutes

Similar Threads

Similar Threads

Similar Threads