Cách thích hợp để định vị / sắp xếp các tệp CSS trong Magento 2 là gì?

13

Để bao gồm tệp CSS, hãy thêm khối <css src = "<path> / <file>" media = "print | <tùy chọn>" /> trong phần <head> trong tệp bố cục.

Tuy nhiên, nó không nói làm thế nào chúng ta có thể ảnh hưởng đến thứ tự của các tệp CSS. Và nếu chúng ta thêm các tệp CSS theo cách này trong một chủ đề tùy chỉnh có chủ đề gốc thì kết quả là các tệp được thêm khá ở đầu phần <head> với rất nhiều tệp CSS khác bên dưới chúng, có nghĩa là mức độ ưu tiên của chúng là khá thấp và chúng tôi không thể dễ dàng ghi đè các quy tắc từ chủ đề gốc hoặc tiện ích mở rộng.

Có những vấn đề tương tự trong Magento 1 và đã có cách giải quyết. Một số đã sạch sẽ hơn những người khác ít hơn.
Cách tốt nhất để đặt hàng tệp CSS của một chủ đề tùy chỉnh ở cuối <head> trong Magento 2 - nếu có thể tuân thủ các nguyên tắc bố cục Magento 2 cho các chủ đề tùy chỉnh là gì?

— Jey DWork
nguồn

13

Magento2 không có cơ chế tích hợp sẵn cho việc này nên tôi quyết định coi nó như một cơ hội để viết phần mở rộng Magento2 đầu tiên của mình. Các phần mở rộng Quickshiftin \ Assetorderer bây giờ đã có trên GitHub!

Khi bạn đã cài đặt tiện ích mở rộng, bạn có thể chỉ định một thuộc tính thứ tự trong các thẻ XML css của mình .

<head>
  <css src="css/page/home.css" order="100"/>
</head>

Bạn cũng có thể sử dụng thuộc tính thứ tự trong các tệp XML bố trí, chẳng hạn như default_head_blocks.xml. Bất kỳ thẻ css nào bạn không chỉ định một đơn đặt hàng sẽ được xử lý như thể chúng có thứ tự là 1.

— quickshiftin
nguồn

Cảm ơn nhiều. Phần mở rộng của bạn làm việc cho tôi. Nhưng phải đối mặt với hai vấn đề một trong di.xml và một trong lớp Quickshiftin \ Assetorderer \ View \ Asset \ File.

— Pankaj Pareek

Xin chào @PankajPareek, đó là tin tốt và xấu. Bất kỳ cơ hội nào bạn có thể giải thích trên GitHub và có thể đóng góp một yêu cầu kéo? Nó sẽ là tốt đẹp để làm cho phần mở rộng hữu ích cho tất cả mọi người!

— quickshiftin

@quickshiftin Phần mở rộng này hoạt động trong v2.0, nhưng không phải v2.1.1. Tuy nhiên, tôi tình cờ phát hiện ra rằng nó không còn cần thiết trong phiên bản 2.1 vì khi tôi thêm order="1"tệp sẽ được sắp xếp chính xác. Không quan trọng thuộc tính là gì miễn là bạn thêm thuộc tính phụ. Để làm cho nó hợp lệ, bạn có thể thay đổi nó data-order="1"và nó vẫn hoạt động.

— thdoan

đặt hàng làm việc cho tập tin js cũng.

— Jalpesh Patel

@quickshiftin bạn đã cập nhật mô-đun cho M2.2.2

— PЯINCƏ

7

Bạn có thể thêm mediathuộc tính cho phần tử css. Điều này sẽ thêm nó vào cuối của tất cả các CSS được bao gồm trong phần đầu.

<head>
    <css src="css/styles.css" media="all" />
</head>

— andyace
nguồn

Nếu tôi muốn nó đầu tiên thì sao?

— TheBlackBenzKid

Điều này vẫn sẽ tải CSS tùy chỉnh trước các tệp CSS lõi 2 của magento chính :(

— Jonathan Marzullo

Kể từ M2.2.1, đây là giải pháp duy nhất phù hợp với tôi. Thêm 'order = "X"' vào nút <css> sẽ gây ra lỗi vì thuộc tính này không được phép.

— Dynomite

2

Tôi đã trả lời chi tiết ở đây về cách magento biểu hiện css và cách đặt hàng đang diễn ra sau hậu trường.

Một số điểm tôi cần đề cập ở đây là:

Nếu bạn muốn kết xuất tệp css tùy chỉnh của bạn sau style-m.cssvà stlyle-l.css, sau đó bạn cần phải xác định tập tin css của bạn như dưới đây:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
Nếu bạn muốn tải tập tin css tùy chỉnh của bạn trước style-m.cssvà stlyle-l.css, sau đó bạn cần phải bao gồm tập tin css của bạn thông qua các file layout xml default_head_blocks.xmlvà thêm tập tin tùy chỉnh css của bạn ở trên style-m.cssvà stlyle-l.css.

Các thuộc tính CSS là hữu hạn và được xác định rõ trong lược đồ bố trí. Theo lược đồ bố trí, bạn có thể sử dụng các thuộc tính sau trong tệp css của mình.

Tập tin: vendor/magento/framework/View/Layout/etc/head.xsd

<xs:complexType name="linkType">
    <xs:attribute name="src" type="xs:string" use="required"/>
    <xs:attribute name="defer" type="xs:string"/>
    <xs:attribute name="ie_condition" type="xs:string"/>
    <xs:attribute name="charset" type="xs:string"/>
    <xs:attribute name="hreflang" type="xs:string"/>
    <xs:attribute name="media" type="xs:string"/>
    <xs:attribute name="rel" type="xs:string"/>
    <xs:attribute name="rev" type="xs:string"/>
    <xs:attribute name="sizes" type="xs:string"/>
    <xs:attribute name="target" type="xs:string"/>
    <xs:attribute name="type" type="xs:string"/>
    <xs:attribute name="src_type" type="xs:string"/>
</xs:complexType>

Điều này chỉ có nghĩa là bạn không thể sử dụng orderhoặc bất kỳ thuộc tính nào khác cùng với định nghĩa css trong tệp xml bố cục của bạn. Bằng cách làm như vậy, bạn sẽ nhận được một ngoại lệ cho biết xác thực lược đồ không thành công.

— Rajeev K Tomy
nguồn

1

Bạn có thể làm cho các quy tắc CSS của mình quan trọng hơn hoặc ít hơn các quy tắc CSS cốt lõi bằng cách thêm hoặc xóa các bộ chọn cha bổ sung.
Ví dụ: chúng ta hãy xem quy tắc CSS mẫu trong lõi:

.cart.table-wrapper .item .col.item {
    padding: 20px 8px 20px 0;
}

Bạn có thể làm cho quy tắc tùy chỉnh của mình quan trọng hơn bằng cách thêm bộ chọn cha, ví dụ:

body .cart.table-wrapper .item .col.item {
    padding: 10px 8px 20px 0;
}

hoặc là

body .cart.table-wrapper .item td.col.item {
    padding: 10px 8px 20px 0;
}

Bạn có thể làm cho quy tắc tùy chỉnh của mình bớt quan trọng hơn bằng cách xóa bộ chọn cha, ví dụ:

.item td.col.item {
    padding: 30px 8px 20px 0;
}

— Mage2.PRO
nguồn

3

Chắc chắn và tôi cũng có thể đơn giản đập xuống !important(nhưng tất nhiên cách tiếp cận của bạn vẫn tốt hơn thế) hoặc thực hiện một lớp tiền tố của nhà cung cấp với LESS. Tuy nhiên, điều này thêm chi phí không cần thiết và phức tạp. Tại sao tiền tố hàng trăm quy tắc trở lên khi thay đổi thứ tự đơn giản của CSS sẽ làm điều đó? Vì vậy, tôi vẫn đang tìm kiếm một cách tốt để giải quyết vấn đề này về phía Magento ...

— Jey DWork

Bên cạnh đó, khi nói đến các tài nguyên khác ngoài định vị CSS có thể còn quan trọng hơn vì các cách giải quyết thậm chí còn xấu hơn.

— Jey DWork

6

Đó không phải là một câu trả lời

— Ahmad Alfy 17/03/2016