Magento2: Cách tốt nhất để sửa đổi tập tin css

Tôi muốn sửa đổi tập tin css pub/static/frontend/Magento/luma/en_US/css/styles-l.css.
Ban đầu tập tin này không có trong thư mục pub / static và nó hiện diện trong

vendor/magento/theme-frontend-blank/web/css/styles-l.less (it's styles-l.less)

Khi tôi sử dụng nội dung tĩnh bằng cách sử dụng php bin/magento setup:static-content:deploy, 2 tệp được tạo trong pub / static liên quan đến nó.
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

Tôi là một nhà phát triển được hỗ trợ và trong khi phát triển các mô-đun, tôi có xu hướng xóa bất cứ thứ gì có trong pub / static (ngoại trừ .htaccess). Vì vậy, với tôi nó dường như không phải là lựa chọn tốt nhất để trực tiếp sửa đổi pub/static/frontend/Magento/luma/en_US/css/styles-l.css.

Trong trường hợp đó, cách thực hành tốt nhất để sửa đổi tệp css ở trên là gì?
1. Tôi sẽ sửa đổi pub/static/frontend/Magento/luma/en_US/css/styles-l.lesshoặc
2. Sự hiểu biết của tôi là sai khi tôi có thể xóa mọi thứ khỏi pub/static(trong quá trình phát triển) và tôi nên sửa đổi pub/static/frontend/Magento/luma/en_US/css/styles-l.cssvà không bao giờ xóa nó.

Bạn không nên chỉnh sửa / sửa đổi các tập tin trong thư mục pub / * hoặc nhà cung cấp / *. Pub dành cho triển khai và nhà cung cấp dành cho cấu trúc mặc định mà bạn ghi đè qua mẫu hoặc mô-đun tùy chỉnh. Thay thế:

• tạo một chủ đề mới bên trong ứng dụng / thiết kế / frontend / {nhà cung cấp} / {yourTheme} /. Bạn có thể sử dụng chủ đề Trống hoặc Luma. Bạn cũng có thể tạo chủ đề mới kế thừa từ Trống (tính kế thừa được xác định trong theme.xml). Nếu bạn đã sử dụng một số chủ đề thì bỏ qua bước này.
• chỉnh sửa .less trong chủ đề của bạn để các thay đổi được hiển thị và không bị thay thế khi xóa bộ nhớ cache hoặc nâng cấp hệ thống.
• Sử dụng grunt để biên dịch .less của bạn vào các tệp triển khai.
• Bạn cũng có thể thiết lập các sơ đồ để xác định kiểu dáng của mình trong các tệp .less để bạn có thể làm việc hiệu quả hơn.

Một số tài liệu tham khảo hữu ích:

• Bắt đầu với Ít
• Ít gỡ lỗi trong Magento 2
• Tạo một chủ đề trong Magento 2
• Bắt đầu với Grunt
• Thư viện giao diện người dùng Magento

Cách tiếp cận này đã làm việc cho tôi

Thực hiện các thay đổi cần thiết trong tệp .less và sau đó chạy các lệnh sau:

php bin/magento setup:upgrade

php bin/magento cache:flush

Nếu chủ đề khác, bạn nên cấu hình:

module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    porto: {
        area: 'frontend',
        name: 'Smartwave/porto',
        locale: 'zh_Hans_CN',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },

    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};

Đây là sơ đồ quy trình xử lý tập tin css của magento2.

Nguồn: Inchoo

Tôi sẽ đề nghị thực hiện

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

Như bạn đã biết,

php bin/magento setup:upgrade

sẽ xóa bộ nhớ cache và nội dung tĩnh, và

php bin/magento setup:static-content:deploy 

sẽ triển khai tất cả các chủ đề trong <mageroot>/pubthư mục. Lệnh này sẽ giảm đáng kể tải lần đầu tiên của cửa hàng của bạn.