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

มีวิธีสร้างไฟล์ CSS ของฉันเองที่โหลดล่าสุดในการเรียงซ้อนหรือไม่?

ถ้าเป็นเช่นนั้นฉันจะเพิ่มไฟล์ CSS ที่กำหนดเองได้อย่างไรและที่ไหน

magento2 css

คำตอบ:

ในการเพิ่ม css ที่กำหนดเองและโหลดล่าสุดคุณต้องตั้งค่าธีมที่กำหนดเอง

สร้างชุดรูปแบบ: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
ตรวจสอบให้แน่ใจว่าคุณได้ตั้งค่าแอปพลิเคชั่น Magento เป็นโหมดนักพัฒนาซอฟต์แวร์
เพิ่มโฟลเดอร์ต่อไปนี้ให้กับธีมที่คุณกำหนดเอง

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

สร้างไฟล์ต่อไปนี้:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

วางรหัสนี้ใน default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>

ใช้ชุดรูปแบบของคุณ: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
ปรับใช้ทรัพยากรแบบคงที่ (SSH ถึงรูทวีโอไอพี):

php bin/magento setup:static-content:deploy

— Joshua34
แหล่งที่มา

สวัสดีฉันเพิ่งทำไป แต่ไฟล์ css ที่ฉันเพิ่มไม่โหลดและเมื่อฉันตรวจสอบหน้ามันทำให้ฉันได้รับข้อผิดพลาด GET สำหรับไฟล์โดยมี 500 (Internal Server Error) คุณทราบไหมว่ามันเป็นอะไร อาจจะ?

— alexcr

คำสั่ง CLI ที่จะนำไปใช้งาน: การติดตั้ง php bin / magento: เนื้อหาคงที่: ปรับใช้

— Joshua34

ฉันควรจะใส่อะไรในไฟล์ CSS ใหม่สองไฟล์ที่ฉันสร้างขึ้น? เพียง CSS บริสุทธิ์?

— styzzz

@styzzz ใช่ css ดิบก็โอเค

— Joshua34

ได้. ฉันเพิ่งทำอย่างนั้นอัปโหลดไฟล์ local-m.css และ local-l.css ไปยังเว็บ / css .... เคลียร์แคชและรันการติดตั้ง php bin / magento: static-content: deploy ฉันอยู่ในโหมดนักพัฒนาซอฟต์แวร์ มันยังไม่หยิบมันขึ้นมา default_head_blocks.xml ของฉันเหมือนกันทุกประการ แต่มันก็ยังไม่ได้ใช้สไตล์เหล่านั้นที่ฉันตั้งไว้ใน CSS

— styzzz

เพื่อเพิ่ม CSS ที่กำหนดเองและโหลดล่าสุด

ติดตามโครงสร้างไดเรกทอรี

แอป / รหัส / ผู้ขาย / modulename / ดู / ส่วนหน้า (สำหรับผู้ดูแลระบบ adminhtml) / web / css / filename.css
เพิ่มพา ธ ไฟล์ css ไปยังไฟล์เลย์เอาต์ที่เกี่ยวข้องตามที่ระบุด้านล่าง
```
<head>
  <css src="Vendor_Module::css/filename.css"/>
</head>
<body>
 ....
</body>
```

— Manish
แหล่งที่มา

รวมถึงVendor_Moduleไม่ทำงานสำหรับฉัน การลบมันทำงานได้ดี

— Saravanan DS

@ SaravananDS คุณต้องแทนที่ด้วยแพ็คเกจและชื่อโมดูลของคุณ

— Manish

ใช่. หลังจากแทนที่ด้วยกำหนดเองของฉันVendor_Moduleเท่านั้นมันไม่ทำงาน

— Saravanan DS

@Manish เราสามารถโหลดไฟล์ css ที่กำหนดเองได้เฉพาะในหน้าผลการค้นหาหรือไม่

— jafar pinjar

ที่นี่ไม่จำเป็นต้องใช้ธีมลูก?

— HaFiz Umer

คุณสามารถเพิ่มแอททริบิวต์ media ซึ่ง magento 2 จะใส่ที่ส่วนท้ายของ css ในส่วน head การตั้งค่าความกว้างเพียง 1px จะเปิดใช้งานในอุปกรณ์ทั้งหมด:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

— Cypher909
แหล่งที่มา

ขอบคุณคุณช่วยชีวิตฉันไว้ ฉันต้องการทำงานกับไฟล์ .less และรวบรวมทุกครั้งที่แก้ไข

— bourax

ที่นี่ไม่จำเป็นต้องสร้างธีมที่กำหนดเองเป็นอันดับแรกใช่ไหม

— HaFiz Umer

@HaFizUmer คุณควรสร้างธีมที่กำหนดเองก่อน ทำตามคำแนะนำจากคำตอบที่ยอมรับแล้วใช้วิธีที่ฉันแสดงที่นี่

— Cypher909