Per component / view css and js

Hey guys, I have a question I can't seem to figure out by myself. I've searched everywhere and used llm's to try to answer this question, even looked at the vite doc, but I can't seem to find a solution.

Laravel with vite by default makes me write all my css and js under resources/css/app.css and resources/js/app.js. These files will become very large and harder to maintain. I still would like to use these files for utility css and js, but I want most of my css and js to be written per component / view. For me, this makes it much clearer what css and js belongs to a specific view / component.

The current way I'm achieving this is with @stack() and @pushonce() with style and script tags in my component and views. this makes me write the css and js in the same file as my html/php, which is okay, but not great, especially because it bloats the html, and the css and js can't be cached by the browser. but I feel like the better solution would be if I had separate files for this. I could always import the files in the components / views in the blade file, but I have a feeling that this could be done automatically by writing some vite config.

My components and views are laid out like this (basic example):

.
└── resources/
    ├── css/
    │   ├── app.css
    │   ├── common.css
    │   └── reset.css
    ├── js/
    │   ├── app.js
    │   └── bootstrap.js
    └── views/
        ├── components/
        │   ├── layout/
        │   │   ├── header/
        │   │   │   ├── index.blade.php
        │   │   │   └── navigation-links/
        │   │   │       └── index.blade.php
        │   │   └── ...
        │   ├── part/
        │   │   ├── post/
        │   │   │   ├── index.blade.php
        │   │   │   ├── card/
        │   │   │   │   └── index.blade.php
        │   │   │   └── create/
        │   │   │       └── index.blade.php
        │   │   └── ...
        │   └── ui/
        │       ├── form/
        │       │   └── index.blade.php
        │       ├── button/
        │       │   └── index.blade.php
        │       └── ...
        ├── errors/
        │   ├── 403.blade.php
        │   └── 404.blade.php
        ├── layouts/
        │   ├── main-layout.blade.php
        │   └── error-layout.blade.php
        └── pages/
            ├── reviews/
            │   ├── index.blade.php
            │   ├── create/
            │   │   └── index.blade.php
            │   └── ...
            ├── login/
            │   └── index.blade.php
            └── ...

What I want to achieve is that I can write my css and js next to each index.blade.php like I've seen in some other frameworks. Like this:

.
└── part/
    └── post/
        └── index.blade.php/
            ├── card/
            │   ├── index.blade.php
            │   ├── index.css
            │   └── index.js
            └── create/
                ├── index.blade.php
                ├── index.css
                └── index.js

And I would want this in a way so that when I visit a specific url, only the css and js for only the things that are used are loaded. I did figure out how I would load all the files, but I can't figure out on how to load only the specific files I need for a given view with components, besides adding them all manually. The folders follow a specific structure should I feel like this could be done automatically.

This way I know exactly which css and js belongs to which component / view, and would prevent loading all js and css for everything when most of it wouldn't be used. And hopefully for each url the js and css can be pre compiled by the framework like laravel does with the blade views. I have a feeling this should be possible as I've seen somewhat similar examples, but I can't figure out on how to achieve this. I'm just a beginner when it comes to all of this.

I feel like this would be good practice imho, but I'm very much a newbie when it comes to this, so I'm always open to constructive criticism. If anyone would be able to help me with this, it would be greatly appreciated since I can't figure it out. thanks :)