Vite Logo

Laravel Vite

Installation

  1. Run the following commands to install NPM dependencies:


    npm install
    npm install vite

  2. Install SASS by running the following command:

    Via NPM npm i -D sass
    Via Yarn yarn add --dev sass

Usage

  1. Change this line of file /vite.config.js

    From input: ['resources/css/app.css', 'resources/js/app.js'], To input: ['resources/sass/app.scss', 'resources/js/app.js'],

  2. Create the file:

    /resources/sass/app.scss

  3. In your main <head>, add the following line to include all static files automatically:

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

  4. Use the following commands to generate the static files:

    npm run dev - needs to be running during the development, automatically refresh the page after any changes in any file.
    npm run build - compiles the final static files of the project, for production usage.
Back home