Level 102
What do you mean by
i imported manifest.json entry point files
Sep 30, 2022
21
Level 1
Jetstream css not working in laravel 9 + vue 3 project
I implemented an app using the stack Laravel 9 + InertiaJs + vue 3 + element plus and jetstream for authentication. After building using npm run build of vite, i imported manifest.json entry point files. My app doesn't read css
Level 1
@Sinnbeck after building assets with vite, used app.js generated chunk file in my default blade template file.
Level 102
@MekouRaouf can you show the code you changed?
Level 1
@php
$manifest = json_decode(file_get_contents(public_path('build/manifest.json')), true);
@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="/build/{{ $manifest["resources/js/app.js"]["css"][0] }}">
@routes
@inertiaHead
</head>
<body class="font-sans antialiased hold-transition sidebar-mini">
@inertia
<x-translations></x-translations>
<script type="module" src="/build/{{ $manifest["resources/js/app.js"]["file"] }}"></script>
</body>
</html>
This is the default blade template file
Level 102
@MekouRaouf Why are you doing this manually? Just let it use vite as its meant to?
@vite(['resources/js/app.js'])
Level 1
@Sinnbeck part of manifest.json file
{
"resources/js/app.js": {
"file": "assets/app.e1774093.js",
"src": "resources/js/app.js",
"isEntry": true,
"dynamicImports": [
"resources/js/Pages/API/Index.vue",
"css": [
"assets/app.cbdb82da.css"
],
],
}
Level 102
@MekouRaouf Laravel supports vite out of the box, so no need to change any of these things
Level 1
@Sinnbeck i did that beacause I'm trying to migrate from development environment to production
add https// -> imgur.com/sf0h4zL
Level 102
@MekouRaouf That is also built in. Run npm run build and you are done. No need to change any files
Level 1
@Sinnbeck add https// to this and see the error generated imgur.com/sf0h4zL
Level 102
@MekouRaouf According to that screenshot you are running npm run dev? If not, then delete the file named hot in the public directory
Level 1
Level 102
@MekouRaouf Any errors in the console this time? Or do you mean you made some changes afterwards that didnt show up?
Level 1
@Sinnbeck no error in the console. Css not working in the app
Level 102
@MekouRaouf Ok. Is css added to the @vite directive?
@vite(['resources/js/app.js', 'resources/css/app.css'])
Level 1
@Sinnbeck No, I removed since it didn't work after import
Level 102
@MekouRaouf Try adding it now and see if it works :)
Level 1
@Sinnbeck Thanks for your help. solution: laracasts.com/discuss/channels/laravel/unable-to-locate-file-in-vite-manifest-resourcescssappcss?reply=813810
Level 102
@MekouRaouf Good. Then mark a best answer to close the thread. But there was no way we could have known as you havent shown any of your files (except the manifest) :)
Level 1
@Sinnbeck this also helped me in getting the solution
Level 102
@MekouRaouf Exelent :)
Please or to participate in this conversation.