[Magento] - Cách viết css bằng file scss và chèn css vào magento

1. Tạo tệp .scss: Tạo một tệp .scss trong thư mục app/design/frontend/YourVendor/YourTheme/web/css/source/. Ví dụ: app/design/frontend/YourVendor/YourTheme/web/css/source/_custom-styles.scss.

2. Viết mã .scss: Trong tệp .scss của bạn, viết mã CSS sử dụng cú pháp Sass. Ví dụ:

// _custom-styles.scss
.custom-button {
    background-color: #3498db;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

Biên dịch .scss thành .css: Chạy lệnh biên dịch để tạo tệp CSS đã biên dịch trong thư mục pub/static.

• Trong Magento 2, bạn có thể sử dụng lệnh sau để biên dịch:

bin/magento setup:static-content:deploy

1. Lưu ý rằng bạn cần chạy lại lệnh này mỗi khi bạn thay đổi tệp .scss để cập nhật CSS đã biên dịch.

2. Kết nối CSS đã biên dịch với Magento: Bây giờ bạn cần liên kết tệp CSS đã biên dịch trong tệp layout hoặc mẫu của Magento để sử dụng nó.

   • Trong tệp layout (app/design/frontend/YourVendor/YourTheme/Magento_Theme/layout/default.xml), bạn có thể thêm:

 Trong mẫu Magento, bạn có thể sử dụng mã sau để áp dụng lớp CSS đã định nghĩa:

Custom Button

Nhớ rằng việc triển khai và cấu hình Magento có thể khác nhau tùy theo phiên bản và cài đặt cụ thể của bạn. Hãy kiểm tra tài liệu hướng dẫn của Magento hoặc cách cụ thể của phiên bản Magento bạn đang sử dụng.