Сейчас я работаю над сайтом 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
файлах.Оттуда все сводится к специфике CSS. Если есть что-то еще, что выше, чем у вас, вам нужно быть более конкретным в определении вашего класса / идентификатора в стилях. Возможно, вы захотите опубликовать изображение структуры DOM, чтобы показать, на что вы нацеливаетесь и что стоит за тем, на что вы нацеливаетесь.
источник
registration.php
,theme.xml
и веб - папку. Перекомпилируйте, а затем выберите его в админке и посмотрите, что произойдет. Я думаю, что происходит что-то еще, но это появилось в моей голове как возможность.background-color: tomato
как никто никогда не будет использовать этот цвет) и проверить, чтобы в скомпилированных стилях он находился на листе. найдитеpub/static/frontend/{package}/{theme}/en_us/css
оба файла стилей. если это не конец файла, значит что-то не так с порядком загрузки по умолчанию.Если вы можете применить свои стили в файле _extend.less, это означает, что у вас есть проблемы со спецификой CSS. Поскольку Magento2 использует меньше компиляции, большинство стилей очень специфичны. Чтобы переопределить их, ваши селекторы стилей должны быть более или менее специфичными. Я не буду публиковать здесь детали самой концепции, так как в Интернете можно найти множество статей.
источник
Если вы используете настройку LESS по умолчанию, убедитесь, что ВСЕ ваши LESS записаны в медиа-запросах M2 LESS. Если вы этого не сделаете, у вас возникнут дубликаты CSS и, возможно, проблемы со спецификой.
Все это сводится к специфике и порядку загрузки, ваш CSS должен загружаться после родительских тем (или модулей), так что, чтобы отменить это, все, что вам нужно сделать, это удовлетворить их специфику.
Например, если родительская тема использует
Тогда вам нужно написать тот же селектор, если по какой-то причине он не работает, вам просто нужно добавить еще один селектор перед ним. Самый простой способ - добавить тело перед ним, так как оно охватывает каждый селектор и добавляет специфичность. Вот так:
Эта статья содержит полезную информацию о специфике CSS.
В качестве альтернативы вы можете перезаписать весь файл
Если вы делаете много настроек, лучше переписать весь файл вместо расширения. Для этого просто добавьте файл в свою тему, используя тот же путь и имя файла.
источник
Для более высокого приоритета вы можете дублировать селектор:
источник
Вы должны переопределить тот же
.less
файл родительской темы, который хотите переопределить, например, если вы хотите переопределить_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
источник