หมายเหตุ 1: สิ่งนี้จะถือว่าคุณขยายเวลาmagento-blankเสมอ
หมายเหตุ 2: <theme-dir>คือapp/design/frontend/Vendor/theme/
พื้นฐาน: การเปลี่ยนตัวแปรพื้นฐาน
(สำหรับ tl; dr, ข้ามไปสู่ข้อสรุป)
ไกด์ส่วนใหญ่ที่ฉันพบครอบคลุมเพียงแค่ขั้นตอนนี้เมื่อใช้น้อยกว่าดังนั้นฉันจะพยายามย่อให้สั้นนี้ Magento 2 มีชุดฐานของตัวแปรที่กำหนดลักษณะที่ใช้กันทั่วไปของชุดรูปแบบ สีแบบอักษรลักษณะของชื่อหน้าและอื่น ๆ จะถูกกำหนดไว้ในตัวแปรเหล่านี้
ใน<magento-root>/lib/web/css/source/lib/variables/คุณจะพบไฟล์ LESS ที่ตั้งชื่อตามสัญชาตญาณจำนวนหนึ่ง ในแต่ละค่าเหล่านี้คุณสามารถค้นหาค่าที่กำหนดให้กับตัวแปรสำหรับองค์ประกอบทั่วไปจำนวนมากใน Magento 2
การเปลี่ยนแปลงใด ๆ <theme-dir>/web/css/source/_theme.lessของตัวแปรเหล่านี้เพียงแค่สร้างไฟล์ใน
ตัวอย่าง:
@newPrimary: #1980fe;
@primary__color: @newPrimary;
@link__color: @newPrimary;
@link__visited__color: lighten(@link__color, 10%);
ในทางเทคนิคคุณสามารถใส่ CSS หรือ LESS ลงไปที่นี่และมันจะนำไปใช้กับเว็บไซต์ของคุณได้สำเร็จ (แต่อย่าทำเช่นนี้) ฉันจะอธิบายวิธีการใช้งานในช่วงเวลาหนึ่ง
การเพิ่มไฟล์ CSS ใหม่
คุณสามารถเพิ่ม CSS ใหม่ในส่วนหัวของหน้าเทมเพลตของคุณทั้งหมด
สร้าง<theme-dir>/Magento_Theme/layout/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>
<css src="css/myStyle.css" />
</head>
</page>
จากนั้นคุณสร้างไฟล์ด้วย CSS หรือ LESS ใหม่:
<theme-dir>/web/css/myStyle.less. คุณสามารถเขียน LESS หรือ CSS ได้ที่นี่
เอาชนะลักษณะที่มีอยู่
ฉันพบว่า Magento 2 LESS ไม่ได้ถูกแทนที่ได้ง่ายเพียงแค่เพิ่มไฟล์ CSS ใหม่ และนี่คือที่ฉันเริ่มหลงทางและฉันจะอธิบายว่า Magento 2 ค้นหาไฟล์ของ LESS ได้อย่างไร
โดยค่าเริ่มต้น Magento 2 จะรวม (และท้ายที่สุดกลับไปที่) ไฟล์เหล่านี้:
<Magento_Blank_theme_dir>/web/css/styles-m.less //Mobile Styles
<Magento_Blank_theme_dir>/web/css/styles-l.less //Desktop enhancements
<Magento_Blank_theme_dir>/web/css/print.less //Print Styles
ไฟล์เหล่านี้รวมถึง (นำเข้า) ไฟล์ LESS อื่น ๆ ซึ่งมักจะมีไฟล์ LESS มากขึ้น และนี่คือที่ที่ไกด์คนอื่นไม่ช่วยเหลือฉันและฉันจะอธิบายสิ่งที่ฉันค้นพบให้ดีที่สุดเท่าที่จะทำได้
ต้นกำเนิด / lib Magic
ในมีเส้น:styles-m.less @import 'source/lib/_responsive.less';คุณจะสังเกตเห็นว่าไม่มีsource/libไดเรกทอรีในmagento-blankชุดรูปแบบ มันเห็นได้ชัดว่าวีโอไอพี 2 <magento-root>/lib/web/css/รูปแบบในที่สุดถอยกลับไป source/lib/_responsive.lessก็มีคุณพบ
ตัวแปรที่คุณใช้_theme.lessมีให้เพราะsource/libไฟล์ที่นำเข้ามาในmagento-blankธีม หมายเหตุ: _theme.lessเป็นไฟล์ว่างในธีมเริ่มต้น อ่านต่อเพื่อเรียนรู้ว่าเหตุใดจึงเป็นเรื่องสำคัญที่ควรทราบ
ไฟล์ LESS "รวมโดยอัตโนมัติ"
คำแนะนำเล็กน้อยที่ฉันพบว่าคุณสามารถสร้างได้<theme-dir>/web/css/_styles.lessเพราะ Magento จะค้นหาและรวมไฟล์นั้นโดยอัตโนมัติ ฉันพบว่านี่เป็นคำแนะนำที่ไม่ดี
หากคุณสร้าง<theme-dir>/web/css/_styles.lessเว็บไซต์ของคุณจะพัง theme-frontend-blank/web/css/styles-m.lessนำเข้า_styles.lessซึ่งจะนำเข้าไฟล์ .less 3 ไฟล์ซึ่งแต่ละไฟล์จะนำเข้าไฟล์ .less มากยิ่งขึ้น
หากคุณสร้าง a แสดง_styles.lessว่าคุณกำลังเอาชนะอยู่ โดยเอาชนะ_styles.lessคุณจะเอาชนะไฟล์ทั้งหมดที่นำเข้าและไฟล์ทุกไฟล์ที่นำเข้าและอื่น ๆ
หมายเหตุเกี่ยวกับ_theme.less:ไฟล์นี้ว่างในธีมเริ่มต้นดังนั้นจึงปลอดภัยที่จะสร้างและเริ่มเพิ่มหากคุณอ้างอิงธีมของคุณเป็นค่าเริ่มต้น อย่างไรก็ตามหากคุณขยายธีมที่ขยายค่าเริ่มต้นไปแล้วโอกาสจะ_theme.lessถูกใช้ไปแล้ว การสร้างนั้นอีกครั้งจะแทนที่มัน
มหัศจรรย์ @magento_import
ในstyles-m.lessคุณจะเห็นเส้นแสดงความคิดเห็นบางส่วน:
//@magento_import 'source/_module.less'; // Theme modules
//@magento_import 'source/_widgets.less'; // Theme widgets
บรรทัดเหล่านี้ไม่ได้ใส่ความเห็นจริง! วีโอไอพี 2 //@magento_importมีการจัดการพิเศษสำหรับสายที่เริ่มต้นด้วย <theme-dir>/web/cssเส้นเหล่านี้เท่านั้นที่สามารถรวมอยู่ในไฟล์
บรรทัดด้านบนสั่งให้ Magento 2 รวมไฟล์ใด ๆ ภายในธีมที่เป็นไปตามรูปแบบที่กำหนด ดังนั้นบรรทัดข้างต้นจะรวม:
'<theme-dir>/Magento_Catalog/web/css/source/_widgets.less';
'<theme-dir>/Magento_Catalog/web/css/source/_module.less';
'<theme-dir>/Magento_Cms/web/css/source/_widgets.less';
'<theme-dir>/Magento_Cms/web/css/source/_module.less';
'<theme-dir>/Magento_Reports/web/css/source/_widgets.less';
'<theme-dir>/Magento_Reports/web/css/source/_module.less';
...and so on
การเพิ่มชื่อไฟล์_widgets.lessและ_module.less จะถูกค้นพบและรวมไว้โดยอัตโนมัติแม้ว่าจะเป็นโมดูลใหม่หรือโมดูลที่ไม่มีไฟล์นั้นอยู่
โปรดทราบว่า Magento-Blank มีไฟล์เหล่านั้นสำหรับ Modules ส่วนใหญ่และหากคุณต้องการใช้วิธีนี้คุณจะต้องคัดลอกต้นฉบับ (ยกเว้นว่าคุณกำลังเขียนใหม่ทั้งหมด)
ข้อสรุป
(อ่าน: ไม่ได้ใช้_styles.less)
เมื่อคุณกำลังมองที่จะเปลี่ยน CSS ขององค์ประกอบที่คุณต้องการจะทำดีที่สุดที่คุณสามารถที่จะค้นหาสิ่งที่ไฟล์ว่ารูปแบบที่กำหนดไว้ใน. _theme.lessในบางครั้งสิ่งที่คุณต้องทำคือการเปลี่ยนตัวแปรใน บ่อยครั้งที่ฉันสงสัยว่าคุณจะต้องคัดลอก_module.lessหรือวาง_widgets.lessลงในธีมของคุณและทำการเปลี่ยนแปลง
หากคุณสร้างโมดูลใหม่หรือมีองค์ประกอบ HTML ใหม่คุณอาจต้องสร้างไฟล์ LESS และรวมไว้ใน<head>ทุก ๆ หน้า
ในกรณีที่มีความซับซ้อนคุณอาจต้องสร้างใหม่หรือ@import @magento_importคุณต้องการค้นหาเด็กที่ต่ำที่สุดที่เหมาะสมกับสิ่งที่คุณทำดังนั้นคุณจึงไม่ต้องคัดลอกไฟล์จำนวนมากที่ไม่จำเป็นหรือเพิ่ม@importเส้นที่สับสนซึ่งปรากฏว่าไม่มีที่ไหนเลย