Gần như tất cả các dự án web hiện đại đều sử dụng SASS để xây dựng phong cách cho hệ thống web. Laravel cũng vậy, Laravel 10.x mới nhất dùng vite để biên dịch css, js. Bài viết này sẽ hướng dẫn bạn cách sử dụng SASS cho Laravel thông qua Vite.
Để biết Vite là gì? Mời bạn tham khảo bài viết sau:
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 tập tin ứng dụng.scss với đường dẫn sau tài nguyên/sass/app.scss
Trong tập tin tài nguyên/sass/app.scss bạn có thể thêm các File kiểu scss, css hoặc mã của riêng mình
@import "bootstrap"; @import "style";
Bước 3: Chỉnh sửa tập tin 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 mẫu lưỡi cắt
<head>
<title>{{ config('app.name', 'vinasupport.com') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:[email protected];600;700&display=swap">
<!-- Scripts -->
@vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
Bước 5: Chạy lệnh npm để tạo File
npm install npm run dev
Làm theo các bước trên là bạn đã có thể viết sass cho Laravel rồi.
Nguồn: vinasupport.com