🤗Laravel Vite,@vite, JQuery and SASS (ok)

https://nono.ma/compile-sass-scss-vite-js

Chú ý 1: Cách để import từ node_modules

C:\xampp82\htdocs\lva5\resources\js\app.js

import jQuery from 'jquery';
window.$ = window.jQuery = jQuery;
import './bootstrap';
import '@coreui/utils/src';

Chú ý 2:

C:\xampp82\htdocs\lva6\resources\sass\app.scss

// Variables
@import 'variables';
// Bootstrap
@import 'bootstrap/scss/bootstrap';
// Font-awesome
@import "@fortawesome/fontawesome-free/scss/fontawesome";
// Font-awesome
@import "@fortawesome/fontawesome-free/css/all.min.css";

C:\xampp82\htdocs\lva6\package.json

{
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.6",
    "axios": "^1.1.2",
    "bootstrap": "^5.2.3",
    "laravel-vite-plugin": "^0.7.2",
    "sass": "^1.56.1",
    "vite": "^4.0.0"
  },
  "dependencies": {
    
    "@hotwired/turbo": "^7.3.0",
    "clipboard": "^2.0.11",
    "jquery": "^3.6.4",
    "jquery-ui": "^1.13.2",
    "laravel-echo": "^1.15.3",
    "popper.js": "^1.16.1",
    "pusher-js": "^8.3.0"
  }
}

php artisan ui bootstrap

yarn add -D sass

C:\xampp8\htdocs\lva\vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/scss/app.scss', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});

// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

You can then load the built css file in your Blade views.

// my-view.blade.php
@vite(['resources/sass/app.scss'])
// <link rel="stylesheet" href="http://nono.test/build/assets/app.0b1a4b87

Áp dụng

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

Install JQuery in laravel 9 with Vite

npm i jquery
// resources/js/app.js
import jQuery from 'jquery';
window.$ = jQuery;
// vite.config.js
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,
        }),
    ],
    resolve: {
        alias: {
            '$': 'jQuery'
        },
    },
});

Now add @vite(['resources/css/app.css', 'resources/js/app.js']) in blade file.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel 9 JQuery with vite</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])

    </head>

    <body>
        <div style="text-align: center;">
            <h1>laravel 9 use jquery with vite</h1>
            <p>Laravel 9 using jquery with vite</p>
        </div>
        <script type="module">
            $(document).ready(function(){
                $("h1").css('color', 'red');
              $("p").css({ 'color': 'blue', 'font-size': '18px' });
            });
        </script>
    </body>

</html>

PreviousCheck url link current add class active (ok)NextDefine Global Variable In Laravel (ok)

Last updated 1 year ago

// Variables @import 'variables'; // Bootstrap @import 'bootstrap/scss/bootstrap'; // Font-awesome @import "@fortawesome/fontawesome-free/scss/fontawesome"; // Font-awesome @import "@fortawesome/fontawesome-free/css/all.min.css";

{ "private": true, "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@popperjs/core": "^2.11.6", "axios": "^1.1.2", "bootstrap": "^5.2.3", "laravel-vite-plugin": "^0.7.2", "sass": "^1.56.1", "vite": "^4.0.0" }, "dependencies": { "@hotwired/turbo": "^7.3.0", "clipboard": "^2.0.11", "jquery": "^3.6.4", "jquery-ui": "^1.13.2", "laravel-echo": "^1.15.3", "popper.js": "^1.16.1", "pusher-js": "^8.3.0" } }

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: ['resources/scss/app.scss', 'resources/js/app.js'], refresh: true, }), ], });

// vite.config.js import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/sass/app.scss', 'resources/js/app.js', ], refresh: true, }), ], });

npm i jquery // resources/js/app.js import jQuery from 'jquery'; window.$ = jQuery; // vite.config.js 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, }), ], resolve: { alias: { '$': 'jQuery' }, }, });

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel 9 JQuery with vite</title> @vite(['resources/css/app.css', 'resources/js/app.js']) </head> <body> <div style="text-align: center;"> <h1>laravel 9 use jquery with vite</h1> <p>Laravel 9 using jquery with vite</p> </div> <script type="module"> $(document).ready(function(){ $("h1").css('color', 'red'); $("p").css({ 'color': 'blue', 'font-size': '18px' }); }); </script> </body> </html>