Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

rajoyish's avatar

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

Dear enlightened artisans,

I pulled my Laravel project that is running "Laravel version 9.21.3", "laravel-vite-plugin": "^0.5.0", and "vite": "^3.0.2" from my repository to local. I did all essential commands such as composer install, npm install and npm run build. Instead of running npm run dev, I built the assets running npm run build. I tried to serve the app running php artisan serve, the browser showed the following error:

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

The manifest.json file is resided in The file C:\xampp\htdocs\example-app\public\build\manifest.json with following configuration:


{
  "resources/js/app.js": {
    "file": "assets/app.d225c007.js",
    "src": "resources/js/app.js",
    "isEntry": true
  },

  "resources/css\app.css": {
    "file": "assets/app.ac31adfe.css",
    "src": "resources/css\app.css"
  }
}

Instead of using @vite directive @vite(['resources/css/app.css', 'resources/js/app.js']), I commented out that @vite directive and linked the build assets as following in my app.blade.php:

<link rel="stylesheet" href="{{ asset('build/assets/app.ac31adfe.css') }}"> <script src="{{ asset('build/assets/app.d225c007.js') }}"></script>

Now the error goes away. The docs says that running the build command will version and bundle your application's assets and get them ready for you to deploy to production. Same thing happened when I deployed the app on the server. Do I always run npm run dev on both local and production? Doesn't the Vite automatically place the bundled assets? As being a noob developer, am I missing something? Your expert knowledge will be appreciated. Thank you! 🙏🙏

0 likes
38 replies
Snapey's avatar

I note that one of the slashes is in the wrong direction in your manifest?

rajoyish's avatar

@Snapey I am on Windows machine. Those were default created by Laravel installer. Please correct me what is wrong? Thank you!

rajoyish's avatar

@Sinnbeck my vite.config.js :


import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});
3 likes
Sinnbeck's avatar

@rajoyish and if you run npm run build again, they are still the wrong slashes in the manifest?

3 likes
rajoyish's avatar

@Sinnbeck Those were default one. I haven't changed anything in the manifest. What is wrong?

rajoyish's avatar

Dear @snapey & @sinnbeck , I amended \app.css to /app.css. It worked! My css are loading successfully and error is gone. Thanks for pointing out. Now the configuration of app.css block in the manifest.json is as the following:


 "resources/css/app.css": {
    "file": "assets/app.0683d55b.css",
    "src": "resources/css/app.css"
  }

However when I ran npm run build again, it changed back to \\app.css in my manifest.json. What's the catch here?

1 like
Sinnbeck's avatar

@rajoyish sounds like a potential windows bug. Perhaps it's fixed in vite 3 which laravel vite should upgrade to soon as far as I know

1 like
thinkverse's avatar

@Sinnbeck @rajoyish Found this issue #19 on laravel-vite-plugin about the same issue, and according to @timacdonald since they're using Vite 3 they're not responsible for generating the CSS paths anymore and he recommends updating the packages and Vite to the latest releases. 🤷‍♂️

Not sure how much that'll help since OP seems to be running the latest versions already and ran into the same issue. Maybe running npm update will solve the issue? 🤔

1 like
rajoyish's avatar

Dear @sinnbeck, @thinkverse, @timacdonald, I am running everything to the latest version. I ran npm update, but it was no luck. I had also asked the same question on Reddit as well. It worked after editing vite.config.js, importing app.css in app.js and removing the app.css line from the app.blade.php file as suggested by @shockoden.

I didn't understand . . . Vite 3 they're not responsible for generating the CSS paths. Does this mean importing app.css file to app.js file just I did as a solution, and including only @vite(['resources/js/app.js']) in the .blade files?

2 likes
okiaso's avatar

@rajoyish This is not the best answer here as you didn't solve the problem. You are the OP, why marked yourself the Best Answer?

Solution: laracasts.com/discuss/channels/laravel/unable-to-locate-file-in-vite-manifest-resourcescssappcss?reply=813810

2 likes
Denzel's avatar

I think this might help... Once you install the laravel application and implement the jetstream livewire, run the following commands:

php artisan migrate -- to migrate the tables. npm install npm run dev php artisan serve These should clear the error "Unable to locate file in Vite manifest:resources/css/app.css"

Denzel's avatar

@sinnbeck, I suppose the npm install, and then npm run dev would clear the vite error, but on that note, I have a point I wish to put across... This wasn't the case in Laravel 9.20. In 9.21, I realized that one has to run the npm run dev in a couple of instances to have the vite errors cleared, but in 9.20, I don't even recall using the npm run dev, since I even just installed laravel using the laravel installer, with the --jet extension and it just compiles even the npm...

I would suggest when a new version is created, please make sure that it doesn't have these errors, because even 9.20 at the beginning, had these couple of errors, but it became stable eventually, so, as a new version is rolled out, please don't release it until it runs properly without these primary errors.

Thank you.

1 like
Sinnbeck's avatar

@Denzel I'm not in charge of releases (no affiliation to laravel). My guess is that they upgraded to vite 3 where the bug appeared. And I would assume it's an upgrade of the laravel vite plugin, not the laravel framework. Laravels framework does not compile vite :)

1 like
Shaden's avatar

There is no bug, or anything like that. The difference between the old mix and vite , is that vite compiles the css as it runs the server, just like php artisan serve does. so when you run npm run dev or build, do not stop the process by ctrl c, just go to your browser and you will find the error has gone, as long as vite is running in the background you will not see this error. I hope this explains the issue . a work around is what @rajoyish mentioned. remember to add the path to your css file in layouts files

thinkverse's avatar

@Shaden There seems to be a bug on Windows, where the CSS file path when built contains a backslash in the path, causing the manifest path to be wrong. There is currently an issue on Vite's GitHub for it, and this was the issue OP had.

1 like
thinkverse's avatar

@okiaso No, it's a bug. One that you could perhaps circumvent with your method, but the underlying issue persists where the CSS path on Windows is built with a backslash, not matching the expected path, causing the Unable to locate file in Vite manifest: resources/css/app.css error. Since resources/css/app.css is not the same as resources/css\app.css. OP isn't the only one that's encountered this bug on Windows either.

2 likes
okiaso's avatar

@thinkverse Well, let's say it's okay. However, I'm using Windows myself too and equally experienced the same error for bout 7 hours before discovering the solution I shared below, and now everything is working just fine!

Solution: laracasts.com/discuss/channels/laravel/unable-to-locate-file-in-vite-manifest-resourcescssappcss?reply=813810

okiaso's avatar

Solved

Step 1: vite.config.js

Vite works best without CSS entry points:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css', 
            'resources/js/app.js',
        ]),
    ],
});

Step 2: resources/js/app.js

Instead, you should import your CSS via JavaScript. Typically, this would be done in your application's resources/js/app.js file:

import './bootstrap';
import '../css/app.css';

Step 3: Layouts

If you're importing your CSS via JavaScript, you only need to include the JavaScript entry point:

<!doctype html>
<head>
    {{-- ... --}}
 
    @vite('resources/js/app.js')
</head>

Step 4: Build

Running the build command will version and bundle your application's assets and get them ready for you to deploy to production:

# Build and version the assets for production...
npm run build

Well done!

php artisan optimize:clear

Reference: laravel.com/docs/9.x/vite#configuring-vite

20 likes
thinkverse's avatar

@okiaso OT I know, but how did you do diff in the code blocks? That's been bothering me. Cannot figure it out, I've tried all the normal ones, plus the torchlight ones, and cannot get it to work. AFAIK it's not documented anywhere?

fyrefli's avatar

@okiaso I'll never be able to thank you enough for this. Was wrecking my head for hours.

el0zahaby's avatar
el0zahaby
3 years ago
Best Answer
Level 1

FIXID IN v3.0.4

so add this line "vite": "^3.0.4" to your package.json

5 likes
MarkTheMartian's avatar

Hi everyone, I too am having the same problem. I've read all the replies and tried different things all to no avail. The posts above refer to "resources/css/app/css" however my entry in the vite.config.js file has "resources/sass/app.scss". My resources/css/app.css file is currently empty as it's a new project. After a "npm run build" and linking the files directly (as in OP's post) does solve the issue. All my slashes are in the correct direction and I'm running the latest fixes. I'm on a windows 10 machine.

My vite.config.js file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});
2 likes
daddi's avatar

@MarkTheMartian this one solved my exact same problem. I actually noticed that sass before but I thought vuetify wouldn't work if i changed that sass to css. I was wrong and my app can now run on the server.

akempis's avatar

add the code below in your resources/js/app.js. Then run npm run build

import.meta.glob([ '../images/', '../fonts/', ]);

gulya_71's avatar

I was helped by deleting the folder /public/build and restart "dev"

cnsair's avatar

Thank you all for your comments. They are all full of information, even though I tried some of them and they didn't work - I learned why they didn't. I got it by importing the CSS into app.css and JS into app.js, which worked, but now faced with another kind of problem: Some of the JavaScripts were not loaded or not working. I've searched online and tried a couple of other things but to no avail. I appreciate it much if anyone can tell me why it's so and give me a solution. I am new to Laravel by the way. Lastly, how can one confirm that a CSS or Javascript file is imported. One can previously do that by CTR + U and clicking the link, but can't do that using vite.

Please or to participate in this conversation.