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

Question

I have installed laravel 9 and livewire. When i try to open login or registraration page from top corner it's showing this error

Can you tell me something how can i fix this one

Answer 1

For me was: When i used in view

@vite(['resources/scss/style.scss'])

I had to add in vite.config.js corresponding path

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

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

Note that npm run dev is just for local usage/testing for deployment you should still use npm run build

Answer 2

Please try to run in terminal:

npm run dev

If that doesn't resolve the issue:

Then start your scss/sass (by whatever way you do it)

 sass --watch resources/sass/:resources/css/app.css --style compressed   

Do you happen to use Vite? if so Goto your root (vite.config.js) and uncomment

'resources/css/app.css',

Then go to your sass/scss and make one edit (for example a spacebar click) and then save that.

If you were using Vite before then re add the line in the root

 'resources/css/app.css'

I hope this works for you. Spamming 'npm run dev' should work but sometimes the old values with strange CSS get pushed to your view and that is why you need to make an edit in your sass/scss file and then save that.

Goodluck!

Answer 3

If you are working with css and you're getting the same error just with css after npm run build:

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

In my case i had to change the vite.config.js from

laravel({
    input: [
        'resources/scss/app.scss',
        'resources/js/app.js',
    ],
    refresh: true,
})

to

laravel({
    input: [
        'resources/css/app.css',
        'resources/js/app.js',
    ],
    refresh: true,
})

to make it work.