Magento2: แนวทางปฏิบัติที่ดีที่สุดในการแก้ไขไฟล์ css

pub/static/frontend/Magento/luma/en_US/css/styles-l.cssฉันต้องการที่จะแก้ไขไฟล์ CSS
เริ่มแรกไฟล์นี้ไม่มีอยู่ในโฟลเดอร์ pub / static และมีอยู่ใน

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

เมื่อฉันใช้เนื้อหาสแตติกโดยใช้php bin/magento setup:static-content:deployไฟล์ 2 ไฟล์จะถูกสร้างขึ้นใน pub / static ที่เกี่ยวข้องกับมัน
1. pub/static/frontend/Magento/luma/en_US/css/styles-l.less
2. pub/static/frontend/Magento/luma/en_US/css/styles-l.css

ฉันเป็นนักพัฒนาที่ได้รับการสนับสนุนและในขณะที่กำลังพัฒนาโมดูลฉันมักจะลบสิ่งที่มีอยู่ใน pub / static (ยกเว้น. htaccess) pub/static/frontend/Magento/luma/en_US/css/styles-l.cssดังนั้นฉันก็ไม่ได้ดูเหมือนจะเป็นตัวเลือกที่ดีที่สุดในการแก้ไขโดยตรง

ในกรณีนี้วิธีที่ดีที่สุดในการแก้ไขไฟล์ css ด้านบน
1.ฉันจะแก้ไขpub/static/frontend/Magento/luma/en_US/css/styles-l.lessหรือ
2.ความเข้าใจของฉันผิดที่ฉันสามารถลบทุกอย่างออกจากpub/static(ในระหว่างการพัฒนา) และฉันควรแก้ไขpub/static/frontend/Magento/luma/en_US/css/styles-l.cssและไม่ลบมัน

คุณไม่ควรแก้ไข / แก้ไขไฟล์ภายใน pub / * หรือผู้จำหน่าย / * ไดเร็กทอรี Pub สำหรับการปรับใช้และผู้จัดจำหน่ายใช้สำหรับโครงสร้างเริ่มต้นซึ่งคุณสามารถแทนที่ผ่านเทมเพลตหรือโมดูลที่กำหนดเองของคุณ แทน:

• สร้างธีมใหม่ภายในแอพ / ออกแบบ / ส่วนหน้า / {ผู้ขาย} / {yourTheme} / คุณสามารถใช้ชุดรูปแบบ Blank หรือ Luma คุณยังสามารถสร้างธีมใหม่ที่สืบทอดจาก Blank (การสืบทอดถูกกำหนดภายใน theme.xml) หากคุณใช้ธีมอยู่แล้วให้ข้ามขั้นตอนนี้
• แก้ไข .less ในธีมของคุณเพื่อให้การเปลี่ยนแปลงสามารถมองเห็นได้และจะไม่ถูกแทนที่เมื่อทำการล้างแคชหรืออัพเกรดระบบ
• ใช้ grunt เพื่อคอมไพล์ .less ลงในไฟล์การปรับใช้
• คุณยังสามารถตั้งค่าซอร์สแม็พเพื่อปักหมุดสไตล์ของคุณในไฟล์ .less ของธีมเพื่อให้คุณทำงานได้มากขึ้น

ข้อมูลอ้างอิงที่มีประโยชน์บางประการ:

• เริ่มต้นด้วย Less
• แก้จุดบกพร่องน้อยกว่าใน Magento 2
• สร้างชุดรูปแบบใน Magento 2
• เริ่มต้นกับ Grunt
• Magento UI Library

วิธีนี้ใช้ได้ผลสำหรับฉัน

ทำการเปลี่ยนแปลงที่จำเป็นในไฟล์ .less จากนั้นเรียกใช้คำสั่งต่อไปนี้:

php bin/magento setup:upgrade

php bin/magento cache:flush

หากชุดรูปแบบอื่นคุณควรกำหนดค่า:

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'
    }
};

นี่คือแผนผังลำดับงานที่วิธี magento2 ประมวลผลไฟล์ css

ที่มา: Inchoo

ฉันอยากจะแนะนำการดำเนินการ

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

อย่างที่คุณรู้

php bin/magento setup:upgrade

จะทำความสะอาดแคชและเนื้อหาคงที่และ

php bin/magento setup:static-content:deploy 

จะปรับใช้ชุดรูปแบบทั้งหมดใน<mageroot>/pubโฟลเดอร์ คำสั่งนี้จะลดการโหลดครั้งแรกของร้านค้าของคุณอย่างมาก