Tích hợp bằng cách download folder
Khi làm việc với bootstrap thì hầu hết chúng ta thường dùng cách download file zip về máy rồi cần dùng css thì nhúng bootstrap hoặc bootstrap-theme vào. Cần js thì nhúng thêm các file js.
Mình nghĩ cách làm này có nhiều nhược điểm:
- Khi tùy biến lại bootstrap rất cực.
- Mình không dùng hết cả thì rất hao tài nguyên hệ thống. Ví dụ page home chỉ dùng vài component như form, button, reboot thì mình lại nhúng cả. Như vậy lượt gọi nào lấy tài nguyên bootstrap cũng nặng không cần thiết. Ngoài ra hệ lụy là bị đánh giá điểm SEO optimize thấp
Trong laravel thì mình tích hợp thế nào cho hợp vệ sinh
Trong laravel có cái mix rất xịn xò có thể build sass ra. Mình dùng component nào thì import component đó.
Muốn tùy biến thì mình có thể override cái variable của bootstrap theo ý mình => giải quyết được 2 vấn đề nêu trên.
Đó chính là giải pháp. 😄 Ngắn gọn vậy hoy.
Để xài được như mình nói thì cần download bootstrap bằng npm
npm install bootstrap@5.1.1 --save-dev
Lưu ý mình cố tình để phiên bản 5.1.1 là để không bị cái lỗi cảnh báo ngáo ộp của sass Math.div nha. Tức là version cũ hơn thì nó sẽ dính lỗi Math.div của sass build bạn cần hạ version của sass trong package.json
Đến khúc này cần có kiến thức về laravel mix 1 chút. Bạn nào không biết thì tìm hiểu thêm nha
Tạo 1 resource css khác thay thế cho version full ví dụ là bootstrap.home.css => mình cần tạo 1 file bootstrap.home.scss trong folder sass với nội dung như sau:
// default
// default
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
// you need
@import "../../node_modules/bootstrap/scss/type";
@import "../../node_modules/bootstrap/scss/images";
@import "../../node_modules/bootstrap/scss/containers";
@import "../../node_modules/bootstrap/scss/grid";
@import "../../node_modules/bootstrap/scss/buttons";
@import "../../node_modules/bootstrap/scss/grid";
// chúng ta sẽ có 1 nùi thứ có thể import vào như sau :
// // Configuration
// @import "functions";
// @import "variables";
// @import "mixins";
// @import "utilities";
// // Layout & components
// @import "root";
// @import "reboot";
// @import "type";
// @import "images";
// @import "containers";
// @import "grid";
// @import "tables";
// @import "forms";
// @import "buttons";
// @import "transitions";
// @import "dropdown";
// @import "button-group";
// @import "nav";
// @import "navbar";
// @import "card";
// @import "accordion";
// @import "breadcrumb";
// @import "pagination";
// @import "badge";
// @import "alert";
// @import "progress";
// @import "list-group";
// @import "close";
// @import "toasts";
// @import "modal";
// @import "tooltip";
// @import "popover";
// @import "carousel";
// @import "spinners";
// @import "offcanvas";
// @import "placeholders";
// // Helpers
// @import "helpers";
// // Utilities
// @import "utilities/api";
// // scss-docs-end import-stack;
Cẩn thận gọi đúng đường dẫn nha, sau đó trong file webpack.mix.js thêm dòng để build như sau :
.sass('resources/sass/bootstrap.home.scss', 'public/css')
Đây là ảnh minh họa:
Cuối dùng gọi lệnh :
# lắng nghe thay đổi và code
npm run watch
# hoặc build code 1 lần và minify cho ra môi trường production
npm run prod
