Как правильно позиционировать / упорядочивать CSS-файлы в Magento 2?

13

Чтобы включить файл CSS, добавьте блок <css src = "<path> / <file>" media = "print | <option>" /> в раздел <head> файла макета.

Однако это не говорит о том, как мы можем влиять на порядок наших CSS-файлов. И если мы добавим CSS-файлы таким способом в пользовательскую тему, у которой есть родительская тема, то результатом будет то, что файлы будут добавлены в самом верху раздела <head> с множеством других CSS-файлов под ними, что означает, что их приоритет довольно low, и мы не можем легко переопределить правила из родительской темы или расширений.

Были похожие проблемы в Magento 1 и были обходные пути. Некоторые были более чистыми, другие менее.
Каков наилучший способ заказать CSS-файл пользовательской темы в нижней части <head> в Magento 2 - если это возможно, соблюдая правила компоновки Magento 2 для пользовательских тем?

— Джи DWork
источник

13

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

После установки расширения вы можете указать атрибут порядка в ваших тегах CSS CSS .

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

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

— quickshiftin
источник

Большое спасибо. Ваше расширение работает на меня. Но столкнулись с двумя проблемами: один в di.xml и один в классе Quickshiftin \ Assetorderer \ View \ Asset \ File.

— Панкадж Парик

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

— quickshiftin

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

— thdoan

Заказать работу для файла 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-файлами

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

Начиная с M2.2.1 это единственное решение, которое работало для меня. Добавление 'order = "X"' к узлу <css> приводит к ошибке, так как этот атрибут не разрешен.

— Диномит

2

Я подробно ответил здесь о том, как magento рендерит 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(но, конечно, ваш подход все же лучше) или реализовать класс префикса вендора с LESS. Тем не менее это добавляет ненужные накладные расходы и сложность. Зачем добавлять префиксы к сотням или более правил, если простое изменение порядка в CSS сделает это? Поэтому я все еще ищу хороший способ решить эту проблему на стороне Magento ...

— Jey DWork

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

— Джи DWork

6

Это не ответ

— Ахмад Альфи