Laravel-Vite compile scss and js to seperate public/asset folder

Question

Laravel-Vite compile scss and js to seperate public/asset folder

2.2k Views Asked by Lourd Nathaniel Gonzalez At 19 April 2025 at 05:50

So before, with laravel MIX, in the webpack.mix.js file, you can write

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/header.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/main.scss', 'public/css')
    .sass('resources/sass/header.scss', 'public/css')

and it will be compiled to public/asset separately. Like the JS files will be compiled to public/asset/js and the sass files will be at public/asset/css. And when you put the files in the head of the blaze.php in your views you simply write

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
<link rel="stylesheet" href="{{ asset('css/header.css') }}">

<script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/header.js') }}"></script>

How do I incorporate this with the now Laravel-Vite? Because when I run npm run dev the seperate files scss and js just gets compiled together in a single folder which is public/build/assets/. They are not being separated as to whether js file goes to js folder and scss file goes to css folder.

Here is what it looks like in my vite.config.js

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

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

Original Q&A

There are 1 best solutions below

**Harsh Patel** · Answer 1

for use scss with Vite in laravel 9

step 1:- create app.scss file in resources/sass directory

resources/sass/app.scss

// Variables
// @import 'variables';

/* The following line can be included in a src/App.scss */
@import "bootstrap/scss/bootstrap";

step 2:- then made changes in vite.config.js file

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            // input: 'resources/js/app.jsx',
            input: [
                "resources/sass/app.scss", // scss file
                "resources/js/app.jsx"
            ],
            refresh: true,
        }),
        react(),
    ],
});

step 3:- made changes in Laravel Blade file. in my case, `resources/views/app.blade.php

resources/views/app.blade.php

<head>
    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

    <!-- Scripts -->
    // @vite(['resources/scss/app.scss', 'resources/js/app.jsx'])
    @vite(['resources/sass/app.scss', 'resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
</head>
...

Done.

now as per your question I understand that you need to save build assets as custom path then see official documentation

as per doc, we need to set buildDirectory key option in vite.config.js file

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

export default defineConfig({
    plugins: [
        laravel({
            // input: 'resources/js/app.jsx',
            input: [
                "resources/sass/app.scss", // scss file
                "resources/js/app.jsx"
            ],
            buildDirectory: 'bundle', // Customize the build directory...
            refresh: true,
        }),
        react(),
    ],
});

& laravel blade file will be as like below


<head>
    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

    <!-- Scripts -->
    {{Vite::useBuildDirectory('bundle')->withEntryPoints(['resources/sass/app.scss', 'resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"]); }}
</head>
...

Note :- we need to install npm add --save-dev sass otherwise we will error about Preprocessor dependency "sass" not found. Did you install it?

Laravel-Vite compile scss and js to seperate public/asset folder

There are 1 best solutions below

Related Questions in LARAVEL

Related Questions in LARAVEL-BLADE

Related Questions in VITE

Related Questions in LARAVEL-VITE

Trending Questions

Popular # Hahtags

Popular Questions