Gần như tất cả các dự án web hiện đại hiện nay đều sử dụng SASS để xây dựng kiểu cho hệ thống web của họ. Laravel, trong phiên bản mới nhất 10.x của mình, đã bắt đầu sử dụng Vite để biên dịch CSS và JavaScript. Bài viết dưới đây sẽ hướng dẫn bạn cách tích hợp SASS vào Laravel thông qua Vite.
Sử dụng SASS với Laravel Vite
Bước 1: Thêm thư viện sass cho npm
npm add -D sass
Bước 2: Tạo file app.scss với đường dẫn sau resources/sass/app.scss
Trong file resources/sass/app.scss bạn có thể thêm các file scss, css hoặc đoạn code style của bạn vào
@import "bootstrap"; @import "style";
Bước 3: Sửa file 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,
}),
],
});
Bước 4: Thêm file vào blade template
<head>
<title>{{ config('app.name', 'vinasupport.com') }}</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.js'])
</head>
Bước 5: Chạy lệnh npm để generate file
npm install npm run dev
Làm theo các bước như trên bạn có thể viết sass cho Laravel rồi đó.
