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

Question

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

score 0 · Answer 1 · answered Feb 21 '23 at 06:47

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?

https://laracasts.com/discuss/channels/vite/laravel-vite-and-sass — Harsh Patel, Feb 21 '23 at 07:01

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

1 Answers1