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

13

В Magento 2 DevDoc написано

Чтобы включить файл 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 и как происходит упорядочивание за сценой.

Некоторые дополнительные моменты, которые я должен упомянуть здесь:

  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-файле макета. Таким образом вы получите исключение, которое указывает на сбой проверки схемы.

Раджив К Томи
источник
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
Это не ответ
Ахмад Альфи