Ligonsker's avatar

Using the Laravel 12 + React starter kit, where is a good location to put React components CSS files?

I am using the Laravel 12 + React starter kit, and I want to create several components, for example:

app/resources/js/components/Navbar.tsx
app/resources/js/components/Footer.tsx
app/resources/js/components/Sidebar.tsx

And I want each component to have its corresponding css file.

I was thinking to have a components folder inside app/resources/css/, like so:

app/resources/css/components/navbar.css
app/resources/css/components/footer.css
app/resources/css/components/sidebar.css

However it's not possible to import the entire components folder inside the app.css, as I get Can't resolve 'components' error:

// resources/css/app.css
@import 'tailwindcss';

@import "tw-animate-css";

@import 'components/'; // <-- Can't resolve 'components/' error

Is there a way to still do it without importing each file separately?

0 likes
3 replies
JussiMannisto's avatar

You should probably rethink the approach. Place the CSS file alongside the component file, and import it into the component itself. That way the CSS is only included in builds when the component is used, and each component is a reusable little package.

Since the CSS isn't relevant outside of the component, it shouldn't be included as a global style. It might still get bundled into the same CSS file, depending build settings, but now Vite knows that the CSS is tied that component. It's subject to tree shaking and can be split into a different CSS bundle if needed.

1 like
Ligonsker's avatar

But how? You mean to fill the resources/js/components/ folder with css files? i.e.:

app/resources/js/components/Navbar.tsx
app/resources/css/components/navbar.css
app/resources/js/components/Footer.tsx
app/resources/css/components/footer.css
app/resources/js/components/Sidebar.tsx
app/resources/css/components/sidebar.css

or something else? A different structure?

Right now I made it work by using the following line in the app/js/app.tsx file:


import.meta.glob('../css/components/*.css', { eager: true });
JussiMannisto's avatar

They are normally placed in the same directory as the component:

app/resources/js/components/Navbar.tsx
app/resources/js/components/Navbar.css

Then imported in the component:

import './Navbar.css';

Please or to participate in this conversation.