Gần dự các dự án web hiện đại đều sử dụng SASS để build style cho hệ thống web. Laravel cũng vậy, bản Laravel mới nhất 10.x sử dụng vite để compiled css, js. Bài viết này sẽ hướng dẫn các bạn sử dụng SASS cho Laravel thông qua Vite.
Để biết Vite là gì? Vui lòng 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 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 đó.
Nguồn: vinasupport.com