การเอาชนะสไตล์ของธีมเปล่าใน Magento 2

คุณจะเอาชนะสไตล์การนำทางสำหรับธีมที่กำหนดเองได้อย่างไรเมื่อสืบทอดจากธีมว่างใน Magento 2

ฉันมีtheme.cssไฟล์ในapp/design/frontend/<Vendor>/<theme>/web/cssโฟลเดอร์ของฉันแต่ฉันทราบว่า Magento 2 ใช้น้อยกว่า ฉันสามารถแทนที่สไตล์ในtheme.cssสไตล์ชีทของฉันได้อย่างง่ายดายแต่ฉันไม่ต้องการใช้!importantต่อไป

นอกจากนี้ฉันกำลังใช้ Bootstrap 3 และฉันสมมติว่าสไตล์จากชุดรูปแบบเปล่าจะแทนที่คำแนะนำรูปแบบใด ๆ ที่ตรงกับใน Bootstrap วิธีที่ดีที่สุดในการเข้าถึงสิ่งนี้คืออะไร?

— Gareth Daine
แหล่งที่มา

คำตอบ:

2 วิธีที่ Magento แนะนำเพื่อแทนที่หรือขยายสไตล์จากธีมหลัก:

1. วิธีง่ายๆ

ขยาย:

ในไดเร็กทอรีธีมของคุณสร้างweb/css/sourceไดเร็กทอรีย่อย (คุณได้ทำส่วนนี้แล้ว) สร้าง_extend.lessไฟล์ที่นั่น

ตามเอกสาร :

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

แทนที่:

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

ตามเอกสารประกอบข้อเสียเปรียบคือ:

"คุณต้องตรวจสอบและอัปเดตไฟล์ของคุณด้วยตนเองทุกครั้งที่มีการอัปเดต _theme.less ของผู้ปกครอง"

2. วิธีโครงสร้าง

ขยาย:

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

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

จากนั้นคุณสร้าง_extend.lessไฟล์โดยเพิ่มรหัสนี้:

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

แทนที่:

ในรูปแบบของคุณสร้างสำเนาของแฟ้มที่สอดคล้องกับองค์ประกอบ UI ที่คุณต้องการเปลี่ยนแปลง (ก_buttons.less, _navigation.lessฯลฯ ) ไฟล์นี้จะแทนที่_buttons.lessของชุดรูปแบบแม่

มันเป็นสิ่งสำคัญที่จะเห็นความแตกต่างระหว่างการแทนที่และขยาย

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการเอาชนะและขยายในครั้งนี้เอกสารหรือประมาณ CSS ในวีโอไอพี 2 ในคู่มือนักพัฒนาซอฟต์แวร์ส่วนหน้าของ

— หลุยส์การ์เซีย
แหล่งที่มา

ดังนั้นสมมติว่าฉันมี Vendor_Namespace Folder ฉันจะเพิ่มอีกโฟลเดอร์หนึ่งชื่อว่า "web / css / source / _extend.less" และ _extend.less-File ใน web / css / source / จะรู้ว่าไฟล์ที่เกี่ยวข้องนั้นอยู่ที่ไหน? ฉันเข้าใจถูกต้องหรือไม่

— Max

ใช่เพียงแค่สร้างไฟล์web/css/source/_extend.lessและใส่สไตล์ของคุณ

— Luis Garcia

ฉันได้สร้างไฟล์ _extend.less ซึ่งนำเข้า _slider.less: <theme_folder> / css / source / ไฟล์ทั้งสองอยู่ในเส้นทางเดียวกัน แต่ไม่ทำงานกฎทั้งหมดใน _slider.less ไม่พบในไฟล์. css ที่สร้างขึ้น ฉันอยู่ในโหมดผู้พัฒนาและเรียกใช้ "การตั้งค่าวีโอไอพีแบบคงที่: เนื้อหาแบบคงที่: ปรับใช้"

— xzegga

คุณลบแคชของเบราว์เซอร์แล้วหรือยัง?

— Luis Garcia

ฉันสามารถแทนที่ <theme_folder> / css / source / lib / ตัวแปรได้หรือไม่? ฉันจะเปลี่ยนตัวแปรของไฟล์ให้น้อยลงได้อย่างไร (ขอบอกว่าฉันต้องการแทนที่ @ button-background) - ฉันต้องเขียนมันใน _buttons_extend.less หรือฉันสามารถแทนที่ lin / web / css / source ทั้งหมด / lib / ตัวแปร

— Goldy

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

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

ในที่สุดฉันก็สิ้นสุดการลบไฟล์ CSS เริ่มต้นทั้งหมดที่ทำโดย Magento ฉันพบว่ามันง่ายกว่าในการเขียน CSS แบบกำหนดเองโดยเฉพาะอย่างยิ่งการใช้เฟรมเวิร์กเช่น Bootstrap แทนที่จะพยายามแทนที่โมดูลต่าง ๆ ทั้งหมด คุณสามารถทำได้ใน:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Mike Stumpf
แหล่งที่มา

วิธีที่ดีในการกระทำสิ่งต่างๆ แต่คำถามเกี่ยวกับ "การขยาย" ชุดรูปแบบเต็มและเพิ่มมากขึ้น

— Miguel Felipe Guillen Calo

ไม่คำถามเกี่ยวกับการเอาชนะ

— Black

ช่วยบอกว่าคุณต้องการแทนที่รูปแบบ-m.cssแล้วใส่สำเนาในweb/cssรูปแบบของคุณชื่อมันกำหนดเองรูปแบบ-m.css

จากนั้นใช้รหัสนี้ในธีมของคุณdefault_head_blocks.xml :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— สีดำ
แหล่งที่มา