Який правильний спосіб розміщення / впорядкування CSS-файлів у Magento 2?

У Magento 2 DevDoc сказано

Щоб включити файл CSS, додайте в файл розмітки файл <css src = "<шлях> / <файл>" медіа = "друк | <опція>" />.

Однак це не говорить про те, як ми можемо впливати на порядок файлів CSS. І якщо ми додаємо файли CSS таким чином у користувальницьку тему, яка має батьківську тему, результат полягає в тому, що файли додаються досить у верхній частині розділу <head> з великою кількістю інших файлів CSS під ними, тобто їх пріоритет досить низький, і ми не можемо легко замінити правила з батьківської теми чи розширень.

У Magento 1 були подібні проблеми, і були вирішені проблеми. Деякі були більш чистими, інші меншими.
Який найкращий спосіб замовити CSS-файл спеціальної теми внизу <head> в Magento 2 - якщо можливо, дотримуючись інструкцій щодо макета Magento 2 для користувацьких тем?

Magento2 не має вбудованого механізму для цього, тому я вирішив розглядати це як можливість написати своє перше розширення Magento2. Розширення Quickshiftin \ Assetorderer тепер доступне на GitHub!

Після встановлення розширення ви можете вказати атрибут замовлення у своїх тегах css XML.

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

Ви також можете використовувати атрибут замовлення в макеті XML-файлів, таких як default_head_blocks.xml. Будь-які теги css, для яких не вказано замовлення , трактуються так, ніби вони мають порядок 1.

Ви можете додати mediaатрибут до елемента css. Це додасть це до кінця всіх включених CSS в голові.

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

Тут я детально відповів про те, як магенто видає css та як відбувається замовлення поза сценою.

Деякі додаткові моменти, які мені тут потрібно зазначити:

1. Якщо ви хочете надати свій спеціальний файл css після style-m.cssі stlyle-l.css, вам потрібно визначити свій файл css, як показано нижче:

   <css src="Magento_Theme:css/path/file.css" media="all" />

2. Якщо ви хочете завантажити свій власний файл css до style-m.cssі stlyle-l.css, тоді вам потрібно включити ваш файл css через файл xml-макета default_head_blocks.xmlта додати свій власний файл css вище style-m.cssта stlyle-l.css.

3. Властивості CSS є кінцевими та добре визначені у схемі компонування. Відповідно до схеми компонування, ви можете використовувати наступні властивості у вашому файлі css.

   Файл: 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>
   

   Це просто означає, що ви не можете використовувати orderабо будь-які інші властивості поряд із визначенням css у своєму файлі xml-файлу. Тим самим ви отримаєте виняток, який вказує на помилку перевірки схеми.

Ви можете зробити свої правила CSS більш-менш важливими, ніж основні правила CSS, додавши або видаливши додаткові батьківські селектори.
Наприклад, давайте подивимося в ядрі зразкове правило CSS:

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

Ви можете зробити своє власне правило важливішим, додавши, наприклад, батьківський селектор:

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

або

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

Ви можете зробити своє власне правило менш важливим, видаливши батьківський селектор, наприклад:

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