В 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 для пользовательских тем?
order="1"
файл, он упорядочивается правильно. Неважно, что это за атрибут, пока вы добавляете дополнительный атрибут. Чтобы проверить его, вы можете изменить его на,data-order="1"
и он все равно будет работать.Вы можете добавить
media
атрибут к элементу css. Это добавит его в конец всех включенных CSS в заголовке.источник
Я подробно ответил здесь о том, как magento рендерит CSS и как происходит упорядочивание за сценой.
Некоторые дополнительные моменты, которые я должен упомянуть здесь:
Если вы хотите визуализировать свой собственный CSS-файл после
style-m.css
иstlyle-l.css
, то вам нужно определить свой CSS-файл, как показано ниже:Если вы хотите загрузить свой собственный файл 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
Это просто означает, что вы не можете использовать
order
или любые другие свойства наряду с определением CSS в вашем XML-файле макета. Таким образом вы получите исключение, которое указывает на сбой проверки схемы.источник
Вы можете сделать свои правила CSS более или менее важными, чем основные правила CSS, добавив или удалив дополнительные родительские селекторы.
Например, давайте посмотрим пример CSS-правила в ядре:
Вы можете сделать свое собственное правило более важным, добавив родительский селектор, например:
или
Вы можете сделать свое собственное правило менее важным, удалив родительский селектор, например:
источник
!important
(но, конечно, ваш подход все же лучше) или реализовать класс префикса вендора с LESS. Тем не менее это добавляет ненужные накладные расходы и сложность. Зачем добавлять префиксы к сотням или более правил, если простое изменение порядка в CSS сделает это? Поэтому я все еще ищу хороший способ решить эту проблему на стороне Magento ...