Include CSS assets in Laravel Passport's Authorization page

Hi, 👋

I did a fresh installation of Laravel with Laravel Breeze (React) And installed Laravel passport. Now, when I was trying out Passport, I realized the assets are missing.

This is how the page is looking 😶 : https://prnt.sc/IhYJtQ28PuaR

I tried to publish the passport views with :

php artisan vendor:publish --tag=passport-views

I see, this is how the asset is included in authorize.blade.php

<!-- Styles -->
<link href="{{ asset('/css/app.css') }}" rel="stylesheet">

But I think, we have to do include it differently since latest laravel version is using Vite.

This is the vite.config.js file:

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            refresh: true,
        }),
        react(),
    ],
});

If anyone has any idea, how to do this.

Thank you so much in advance :)

DhPandya

2 years ago

Level 12

@aniket_in While using Vite you have to use its own directive.

@vite(['resources/css/app.css'])

It will only work if you're reading assets from your resources directory.

Aniket_IN

2 years ago

Level 1

@DhPandya I tried doing

@vite(['resources/css/app.css'])

But it's giving:

Unable to locate file in Vite manifest: resources/css/app.css.

However, I can see the file app.css is present under resources/css

@tailwind base;
@tailwind components;
@tailwind utilities;

Maybe something to do with the Vite configuration.

I see on app.blade.php this is how the assets are included:

@viteReactRefresh
@vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
@inertiaHead

DhPandya

2 years ago

Best Answer

Level 12

@Aniket_IN Have you defined your input CSS files in the vite.config.js ?

export default defineConfig({
    plugins: [
        laravel({
            input: [
				'resources/css/app.css',
				'resources/js/app.jsx'
			],
            refresh: true,
        }),
        react(),
    ],
});

Aniket_IN

2 years ago

Level 1

@DhPandya You are awesome man! 🤯 That was it, I just had to add

input: "resources/css/app.css",

🤦‍♂️

Thank you so much :)

DhPandya

2 years ago

Level 12

@Aniket_IN If your question is resolved then please mark the question sovled. Thanks

1 like

Please or to participate in this conversation.