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

Hello, I am new at Vite, so i installed Laravel 10 and i used with Vite

this is my vite.config file content

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/app.scss',
                'resources/scss/admin/admin.scss',
                'resources/js/app.js',
                'resources/js/admin/admin.js',
            ],
            sass: {
                includePaths: ['node_modules'], // include node_modules directory in Sass import paths
            },
            refresh: true,
        }),
    ]
});

as you see my scss, js, fonts, and some images files are in resources folder. After i build the assets with npm run build , i got in public/build/manifest.json this:

  "resources/js/admin/admin.js": {
    "file": "assets/admin-e1b90892.js",
    "imports": [
      "_bootstrap-0d91dc04.js"
    ],
    "isEntry": true,
    "src": "resources/js/admin/admin.js"
  },
  "resources/js/app.js": {
    "file": "assets/app-62e7b194.js",
    "imports": [
      "_bootstrap-0d91dc04.js"
    ],
    "isEntry": true,
    "src": "resources/js/app.js"
  },
  "resources/scss/admin/admin.scss": {
    "file": "assets/admin-ed2832fa.css",
    "isEntry": true,
    "src": "resources/scss/admin/admin.scss"
  },
  "resources/scss/app.scss": {
    "file": "assets/app-0fdbeafe.css",
    "isEntry": true,
    "src": "resources/scss/app.scss"
  }

and also another paths for the fonts also.

I uploaded my laravel project to public_html folder and i made the root folder to point to public function in laravel

public_html/public

every thing work good just in the home page i got the css and the js files. but when i click on any other route i got this error

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

why is that happened, and please how can i solve it?.

Thanks

LaryAI

3 years ago

Level 58

The error message "Unable to locate file in Vite manifest: resources/css/app.css" suggests that the application is looking for a CSS file in the wrong directory. The configuration file provided in the question shows that the CSS files are located in the "resources/scss" directory, not "resources/css".

To fix this issue, update the application code to look for the CSS files in the correct directory. This can be done by updating the HTML code to reference the correct CSS file path. For example, if the CSS file is located at "public/build/assets/app-0fdbeafe.css", update the HTML code to include the following line:

<link rel="stylesheet" href="/build/assets/app-0fdbeafe.css">

Note that the leading slash ("/") is important to ensure that the file path is relative to the root directory of the application.

If the issue persists, it may be necessary to update the Vite configuration file to ensure that the correct file paths are generated in the manifest file.

hasanhatem

3 years ago

Level 5

but in the home page it's redirect correctly to this route:

<link rel="preload" as="style" href="https://lodging.ae/build/assets/app-0fdbeafe.css" />
<link rel="modulepreload" href="https://lodging.ae/build/assets/app-62e7b194.js" />
<link rel="modulepreload" href="https://lodging.ae/build/assets/bootstrap-0d91dc04.js" />
<link rel="stylesheet" href="https://lodging.ae/build/assets/app-0fdbeafe.css" />
<script type="module" src="https://lodging.ae/build/assets/app-62e7b194.js"></script>

hasanhatem

3 years ago

Best Answer

Level 5

I am sorry for misunderstanding, to fix this problem i just replace this

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

to this

@vite(['resources/scss/app.scss', 'resources/js/app.js'])

jumajoe19

2 years ago

Level 1

run npm run dev

1 like

Please or to participate in this conversation.