Magento 2 - переопределение CSS без использования! Важно везде

Сейчас я работаю над сайтом Magento 2 для клиента. Предположим, что бренд моего клиента boofarи тема, которую я пытаюсь расширить / переопределить, foobarя установил в качестве родительской темы, используяfrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Затем в разделе frontend/Foobarthemes/boofar/web/css/source/_theme.lessя написал код CSS, который я хочу переопределить. Я также попробовал это с _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

Я вынужден использовать !importantчто-нибудь, чтобы работать здесь. Ни один из шрифтов и текстового материала не работает в приведенном выше коде.

Правильно ли я понял рабочий процесс внешнего интерфейса Magento 2?

Вы хотите, чтобы ваши стили были только в _theme.lessфайле, если вы хотите переопределить _theme.lessфайл родительской темы . Для этого файла загружен только один из них, и он всегда будет выбранной темой, если файл существует там. Оттуда он будет использовать резервную схему, чтобы найти этот файл и использовать его.

Таким образом, в вашем случае использование _extend.lessфайла является правильным файлом для использования.

Это немного сбивает с толку, поскольку код, который помещается в _extend.lessфайл, загружается последним в тот момент, когда Magento компилирует все стили, существующие на сайте. Поэтому мне интересно, есть ли что-то мешающее с порядком загрузки.

Посмотрите, как вы это настроили, попробуйте настроить вашу тему в другом пространстве имен, а не в той же самой теме. Это может не решить проблему, так как ваша тема настроена так же, как в Magento настроена тема luma / blank. Но для всей работы, которую я проделал, у меня есть пространство имен Vender, которое будет расширяться либо из сторонней темы, либо из luma / blank.

Следующее, что нужно попробовать, - это обернуть ваш код во встроенные медиазапросы. Я вдаваться в подробности здесь , но в основном он останавливает ваши стили загружаются дважды в styles-l.cssи в styles-m.cssфайлах.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

Оттуда все сводится к специфике CSS. Если есть что-то еще, что выше, чем у вас, вам нужно быть более конкретным в определении вашего класса / идентификатора в стилях. Возможно, вы захотите опубликовать изображение структуры DOM, чтобы показать, на что вы нацеливаетесь и что стоит за тем, на что вы нацеливаетесь.

Если вы можете применить свои стили в файле _extend.less, это означает, что у вас есть проблемы со спецификой CSS. Поскольку Magento2 использует меньше компиляции, большинство стилей очень специфичны. Чтобы переопределить их, ваши селекторы стилей должны быть более или менее специфичными. Я не буду публиковать здесь детали самой концепции, так как в Интернете можно найти множество статей.

Если вы используете настройку LESS по умолчанию, убедитесь, что ВСЕ ваши LESS записаны в медиа-запросах M2 LESS. Если вы этого не сделаете, у вас возникнут дубликаты CSS и, возможно, проблемы со спецификой.

Все это сводится к специфике и порядку загрузки, ваш CSS должен загружаться после родительских тем (или модулей), так что, чтобы отменить это, все, что вам нужно сделать, это удовлетворить их специфику.

Например, если родительская тема использует

.parent-selector .selector {
    ...
}

Тогда вам нужно написать тот же селектор, если по какой-то причине он не работает, вам просто нужно добавить еще один селектор перед ним. Самый простой способ - добавить тело перед ним, так как оно охватывает каждый селектор и добавляет специфичность. Вот так:

body .parent-selector .selector {
    ...
}

Эта статья содержит полезную информацию о специфике CSS.

В качестве альтернативы вы можете перезаписать весь файл

Если вы делаете много настроек, лучше переписать весь файл вместо расширения. Для этого просто добавьте файл в свою тему, используя тот же путь и имя файла.

Для более высокого приоритета вы можете дублировать селектор:

  .home.home {
    display: none;
  }

Вы должны переопределить тот же .lessфайл родительской темы, который хотите переопределить, например, если вы хотите переопределить _theme.lessфайл, то вам нужно скопировать этот файл в дочернюю тему здесь (убедитесь, что тот же путь родительской темы)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

Вы можете переопределить свой CSS здесь.

Внедрить ваши пользовательские файлы CSS лучше.

Подробнее: Как добавить пользовательский файл CSS в Magento 2

И Документы Магов: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

Не забудьте скомпилировать, используя grunt / less для обработки css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html