Nếu bạn là một Magento 2 frontend developer, có bạn bạn đã gặp vấn đề với CSS không được cập nhật ngoài frontend. Điều này xảy ra bởi vì do một khái niệm “LESS” đã được giới thiệu trong Magento 2.
Với “LESS”, code của bạn phải được compile(biên dịch) và lưu dưới dạng CSS, đây là một nội dung tĩnh và do đó nó không được cập nhật ngay lập tức ở frontend.
Có thể bạn đã cố gắng giải quyết vấn đề này bằng cách chạy các câu lệnh deploy hoặc xóa bộ nhớ cache, đây là một công việc mệt mỏi và có thể không phải là giải pháp thích hợp trong nhiều tình huống. Có một cách tốt hơn để xử lý tình huống này, đó là Compile LESS file với Grunt trong Magento 2.
Compile LESS file với Grunt trong Magento 2
Lưu ý: Trước khi bắt đầu bạn hãy đổi tên hoặc tạo file mới đối với 3 file sau:
|
1 2 3 |
package.json.sample đổi tên thành package.json grunt-config.json.sample đổi tên thành grunt-config.json Gruntfile.js.sample đổi tên thành Gruntfile.js |
Bạn cũng cần đảm bảo rằng Magento của bạn đang được đặt ở developer mode hoặc default mode.
|
1 |
php bin/magento deploy:mode:set developer |
Bước 1: Cài đặt node.js
Bạn có thể tham khảo link này để cài đặt node.js phù hợp với máy của bạn. Hiện mình sử dụng Ubuntu nên mình sẽ cài đặt như sau:
|
1 2 3 |
# Using Ubuntu curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt-get install -y nodejs |
Bước 2: Cài Grunt CLI tool
Hãy chạy câu lệnh này để cài đặt Grunt:
|
1 |
sudo npm install -g grunt-cli |
Dành cho bạn nào chưa cài npm:
|
1 |
sudo apt-get install npm |
Bước 3: Thiết lập cho project
Tiếp theo hãy cài đặt cho dự án mà bạn muốn sử dụng Grunt. Đầu tiên hãy di chuyển đến thư mục root của project Magento của bạn:
|
1 |
cd magento_installation_root_folder |
Sau đó chạy lệnh:
|
1 2 |
npm install npm update |
Bước 4:
Thêm theme của bạn vào Grunt configuration. Để làm điều này hãy tạo file dev/tools/grunt/configs/local-themes.js và thêm vào module.exports như sau:
|
1 2 3 4 5 6 7 8 9 10 |
<theme>: { area: '<area>', name: '<Vendor>/<theme>', locale: '<language>', files: [ '<path_to_file1>', //path to root source file '<path_to_file2>' ], dsl: 'less' } |
Trong đó:
-
<Vendor>: Tên vendor của theme -
<theme>: Theme code, thông thường sẽ trùng với tên thư mục của theme. -
<language>: Ngôn ngữ -
<area>: area code, có thể là frontend hoặc adminhtml -
<path_to_file>: Đường dẫn đến source file.
Xem thêm: Tạo custom theme trong Magento 2.
Ví dụ:
Sau đó hãy kiểm tra và đảm bảo rằng file grunt-config.json có đường dẫn đến file local-themes.js ở phía trên:
|
1 2 3 |
{ "themes": "dev/tools/grunt/configs/local-themes.js" } |
Nếu bạn muốn sử dụng Grunt để tự động “xem” các thay đổi mà không cần tải lại trang trong trình duyệt. Hãy cài đặt tiện ích mở rộng LiveReload trong trình duyệt của bạn.
Các command cơ bản với Grunt
Bên dưới là các lệnh cơ bản để thực hiện các tác vụ tương ứng, chạy chúng trong thư mục root Magento của bạn:
| GRUNT | MÔ TẢ |
|---|---|
| grunt clean | Xóa static files của theme trong thư mục pub/static và thư mục var. |
| grunt exec | Generate các file tĩnh vào thư mục pub/static/frontend/ . Sử dụng grunt exec:<theme> để generate theme cụ thể. |
| grunt less | Compiles các CSS file trong thư mục pub/static/frontend/. Sử dụng grunt less:<theme> để compile theme cụ thể. |
| grunt watch | Theo dõi sự thay đổi trong source files, recompiles .css files, và reload lại trang ở browser |
Tham khảo thêm tại: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css_debug.html