Magento 2 - การเอาชนะ CSS โดยไม่ต้องใช้! สำคัญทุกที่

ฉันทำงานบนเว็บไซต์ Magento 2 ในขณะนี้สำหรับลูกค้า สมมติว่าแบรนด์ของลูกค้าของฉันคือboofarและชุดรูปแบบที่ฉันพยายามที่จะขยาย / แทนที่คือfoobarฉันได้ตั้งค่าเป็นชุดรูปแบบหลักโดยใช้frontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

จากนั้นภายใต้frontend/Foobarthemes/boofar/web/css/source/_theme.lessฉันเขียนโค้ด CSS ที่ฉันต้องการแทนที่ _extend.lessฉันยังมีความพยายามนี้กับ

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

ฉันถูกบังคับให้ใช้!importantทุกอย่างเพื่อทำงานที่นี่ ไม่มีสิ่งที่เป็นแบบอักษรและข้อความในรหัสข้างต้น

ฉันไม่เข้าใจกระบวนการทำงานส่วนหน้าของ Magento 2 อย่างถูกต้องหรือไม่?

คุณต้องการมีสไตล์ใน_theme.lessไฟล์เท่านั้นหากคุณต้องการแทนที่_theme.lessไฟล์ของธีมพาเรนต์ สำหรับไฟล์นั้นมีเพียงหนึ่งไฟล์เท่านั้นที่ถูกโหลดและจะเป็นธีมที่เลือกไว้เสมอหากไฟล์นั้นมีอยู่ จากนั้นจะใช้รูปแบบทางเลือกเพื่อค้นหาไฟล์นั้นและใช้งาน

ดังนั้นในกรณีของคุณการใช้_extend.lessไฟล์เป็นไฟล์ที่เหมาะสมที่จะใช้

นี่เป็นความสับสนเล็กน้อยเนื่องจากรหัสที่ใส่ลงใน_extend.lessไฟล์จะถูกโหลดล่าสุดเมื่อ Magento รวบรวมสไตล์ทั้งหมดที่มีอยู่ในเว็บไซต์ ดังนั้นฉันสงสัยว่ามีบางสิ่งที่ยุ่งกับคำสั่งโหลด

ดูวิธีการตั้งค่าของคุณลองตั้งค่าชุดรูปแบบของคุณในเนมสเปซที่แตกต่างกันและไม่อยู่ในชุดรูปแบบเดียวกัน สิ่งนี้อาจไม่สามารถแก้ปัญหาได้เนื่องจากวิธีการตั้งค่าชุดรูปแบบของคุณเหมือนกับ Magento มีการตั้งค่าชุดรูปแบบ luma / blank แต่สำหรับงานทั้งหมดที่ฉันทำฉันมีเนมสเปซของผู้จำหน่ายที่จะขยายจากธีมของบุคคลที่สามหรือจาก luma / blank

สิ่งต่อไปที่จะลองคือห่อโค้ดของคุณในคิวรีสื่อในตัว ฉันเข้าไปดูรายละเอียดเพิ่มเติมที่นี่แต่โดยทั่วไปมันจะหยุดสไตล์ของคุณจากการโหลดสองครั้งลงstyles-l.cssในstyles-m.cssไฟล์และ

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

จากนั้นทุกอย่างก็มาถึงความเฉพาะเจาะจงของ CSS หากมีอย่างอื่นที่สูงกว่าของคุณคุณจะต้องเฉพาะเจาะจงมากขึ้นในการกำหนด class / id ของคุณในรูปแบบ คุณอาจต้องการโพสต์รูปภาพของโครงสร้าง DOM เพื่อแสดงสิ่งที่คุณกำหนดเป้าหมายและสิ่งที่เกินกว่าการขี่สิ่งที่คุณต้องการกำหนดเป้าหมาย

หากคุณสามารถนำสไตล์ของคุณไปใช้ในไฟล์ _extend.less นี่หมายความว่าคุณมีปัญหากับความเฉพาะเจาะจงของ CSS เนื่องจาก Magento2 ใช้การรวบรวมน้อยกว่าสไตล์ส่วนใหญ่จึงมีความเฉพาะเจาะจงมาก หากต้องการลบล้างตัวเลือกสไตล์ของคุณจะต้องเจาะจงมากกว่าหรือเท่ากับ ฉันจะไม่โพสต์รายละเอียดของแนวคิดด้วยตัวเองที่นี่เนื่องจากมีบทความจำนวนมากที่สามารถพบได้ทั่วไป

หากคุณใช้การตั้งค่า LESS เริ่มต้นให้ตรวจสอบให้แน่ใจว่าLESS ทั้งหมดของคุณเขียนอยู่ในการสืบค้นสื่อ M2 LESS หากคุณไม่ทำเช่นนั้นคุณจะพบกับ CSS ที่ซ้ำกันและอาจเป็นปัญหาเฉพาะเจาะจง

ทั้งหมดนี้มาพร้อมกับความเฉพาะเจาะจงและลำดับการโหลด CSS ของคุณควรโหลดหลังจากธีมหลัก (หรือโมดูล) ดังนั้นหากต้องการลบล้างสิ่งนี้ทั้งหมดที่คุณต้องทำคือทำตามความต้องการ

ตัวอย่างเช่นหากธีมหลักใช้

.parent-selector .selector {
    ...
}

จากนั้นคุณจะต้องเขียนตัวเลือกเดียวกันถ้าด้วยเหตุผลบางอย่างที่ไม่ได้ผลคุณเพียงแค่เพิ่มตัวเลือกอื่นก่อนหน้านั้น วิธีที่ง่ายคือการเพิ่มเนื้อหาไว้ข้างหน้าเนื่องจากครอบคลุมทุกตัวเลือกและเพิ่มความเฉพาะเจาะจง ชอบมาก

body .parent-selector .selector {
    ...
}

บทความนี้มีข้อมูลที่ดีเกี่ยวกับความจำเพาะ CSS

หรือคุณสามารถเขียนทับไฟล์ทั้งหมดได้

หากคุณทำการปรับแต่งเป็นจำนวนมากวิธีที่ดีกว่าคือการเขียนทับไฟล์ทั้งหมดแทนที่จะขยาย ในการทำเช่นนี้เพียงเพิ่มไฟล์ในธีมของคุณโดยใช้พา ธ และชื่อไฟล์เดียวกัน

สำหรับลำดับความสำคัญที่สูงขึ้นคุณสามารถทำซ้ำตัวเลือก:

  .home.home {
    display: none;
  }

คุณต้องแทนที่.lessไฟล์เดียวกันของธีมพาเรนต์ที่คุณต้องการแทนที่เช่นถ้าคุณต้องการแทนที่_theme.lessไฟล์จากนั้นคุณต้องคัดลอกไฟล์นี้ไปยังธีมลูกที่นี่ (ให้แน่ใจว่าพา ธ เดียวกันของธีมพาเรนต์)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

คุณสามารถแทนที่ CSS ของคุณได้ที่นี่

ฉีดไฟล์ CSS ที่กำหนดเองของคุณดีกว่า

อ่านเพิ่มเติม: วิธีเพิ่มไฟล์ CSS ที่กำหนดเองใน Magento 2

และเอกสารผู้วิเศษ: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

อย่าลืมคอมไพล์โดยใช้ grunt / less เพื่อประมวลผล css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html