CODEWITHSUNDEEP
laravelmanifestvitelaravel-artisanlaravel-authentication
Labeeque Sarwar
Labeeque Sarwar

Reputation: 11

Unable to locate file in Vite manifest: resources/sass/app.scss. Laravel:10.6.2, while installing new project with php artisan auth:ui

I have installed new Laravel project current version 10.6.2 with basic AUTH scaffolding with php artisan auth:ui, it created with vite installation successfully. but when I run the project it showing me an error "Unable to locate file in Vite manifest: resources/sass/app.scss." vite configurations for auth

i have checked twice and also try to create file manually

  1. manifest
  2. vite.config.js
  3. resources directory

delete vender n update composer

npm install --save-dev vite laravel-vite-plugin npm install --save-dev @vitejs/plugin-vue ( also try sass,bootstrap => this cause error)

at last npm run build again n again after every try.

Upvotes: 1

Views: 4117

Answers (1)

Amira Wahba
Amira Wahba

Reputation: 9

To install and compile vite package in a correct way without any problems you need to do these steps:

1- Install node.js ( in case: you have already installed it,just go to the terminal inside your project and give it the order:

  node -v

,and if it could give the number of version, that means: done).

2- Install npm on your device( Don't worry: if you have successfully installed node.js, It would be installed with node, and to test that type in the terminal that order:

  npm -v

,and if it could give the number of version, that means: done).

3- Now you need to get started using Vite and the Laravel plugin by giving the next order in terminal:

  npm install  , or just:  npm i

and give it few seconds till it gives you a message saying it has successfully installed, after that go and open the file vite.config.js and Make sure that the file includes: 2 codes for import & 1 code for export like this:

 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,
        }),
    ],
});

4- Within this step you will include the vite package in your view file like home.blade.php in the head of the html codes

 <!doctype html>
 <head>
 {{-- ... --}}

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

5- In the end you need to run your npm with these orders in the terminal:

 npm run dev

 npm run build

Remember: You'll need to do the last step every time you run and open you project in the browser

Have a nice day and Good Luck.

Upvotes: 0

Related Questions