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

14

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

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

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

— Jey DWork
джерело

14

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

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

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

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

— квакішфітин
джерело

Велике дякую. Ваше розширення працювало на мене. Але зіткнулися з двома проблемами: один у di.xml та один у Quickshiftin \ Assetorderer \ View \ Asset \ File class.

— Панкай Парік

Привіт @PankajPareek, це хороші новини і погані. Будь-який шанс ви можете розробити на GitHub і, можливо, надіслати запит на тягнення? Було б непогано зробити розширення корисним для всіх!

— швидкий потік

@quickshiftin Це розширення працювало в v2.0, але не v2.1.1. Однак я випадково виявив, що він більше не потрібен у v2.1.1, оскільки коли я додаю order="1"файл, впорядковується правильно. Не має значення, який атрибут, якщо ви додаєте додатковий атрибут. Щоб зробити його перевіреним, ви можете змінити його, data-order="1"і він все ще працюватиме.

— thoan

замовити роботу і для js-файлу.

— Jalpesh Patel

@quickshiftin Ви оновили свій модуль для M2.2.2

— PЯINCƏ

7

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

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

— andyace
джерело

Що робити, якщо я хочу цього спочатку?

— TheBlackBenzKid

Це все ще завантажить користувальницький CSS перед основними файлами CSS magento 2 :(

— Джонатан Марзулло

Станом на M2.2.1 це єдине рішення, яке працювало для мене. Додавання 'order = "X"' до вузла <css> припускає помилку, оскільки цей атрибут заборонений.

— Диноміт

2

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

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

Якщо ви хочете надати свій спеціальний файл css після style-m.cssі stlyle-l.css, вам потрібно визначити свій файл css, як показано нижче:
```
<css src="Magento_Theme:css/path/file.css" media="all" />
```
Якщо ви хочете завантажити свій власний файл css до style-m.cssі stlyle-l.css, тоді вам потрібно включити ваш файл css через файл xml-макета default_head_blocks.xmlта додати свій власний файл css вище style-m.cssта stlyle-l.css.

Властивості 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-файлу. Тим самим ви отримаєте виняток, який вказує на помилку перевірки схеми.

— Радєєв К Томі
джерело

1

Ви можете зробити свої правила 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;
}

— Mage2.PRO
джерело

3

Звичайно, і я також міг би просто примхнути !important(але, звичайно, ваш підхід все-таки кращий за це) або застосувати клас префіксу постачальника з МЕНШЕ. Однак це додає зайвих витрат і складності. Чому префіксація сотень і більше правил, коли проста зміна порядку CSS це зробить? Тож я все ще шукаю хорошого способу вирішити це з боку Magento ...

— Jey DWork

Крім того, якщо мова йде про інші ресурси, ніж CSS, позиціонування може набути ще більшого значення, оскільки обхідні шляхи можуть бути ще більш неприємними.

— Jey DWork

6

Це не відповідь

— Ахмад Альфі