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

10

Сейчас я работаю над сайтом 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?

Фрэнсис Ким
источник
Где находится оригинальное правило CSS?
Аарон Аллен
1
Попробуйте обновить это в web / css / custom.css (простой css) и не забудьте удалить var / folder и pub / static / content / frontend / yourtheme_package / yourtheme / en_US / удалить папку css и запустить php bin / magento setup: static -cotent: команда развертывания.
Гниды
У вас есть в theme.xml "foobar1", чтобы родительская тема не была "foobar"
St3phan

Ответы:

8

Вы хотите, чтобы ваши стили были только в _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, чтобы показать, на что вы нацеливаетесь и что стоит за тем, на что вы нацеливаетесь.

circlesix
источник
Хороший вопрос - может быть, тема, которую я использую (сторонняя), делает что-то странное, но из-за того, что вы говорите, если я делаю то же переопределение для темы по умолчанию, мне не нужно использовать! важный. Стоит ли попробовать?
Фрэнсис Ким
1
Я думаю, вы можете просто создать быструю тему с просто registration.php, theme.xmlи веб - папку. Перекомпилируйте, а затем выберите его в админке и посмотрите, что произойдет. Я думаю, что происходит что-то еще, но это появилось в моей голове как возможность.
circleix
1
Кроме того, просто для проверки работоспособности вы можете ввести уникальное значение в ваших стилях (я хотел бы использовать его, так background-color: tomatoкак никто никогда не будет использовать этот цвет) и проверить, чтобы в скомпилированных стилях он находился на листе. найдите pub/static/frontend/{package}/{theme}/en_us/cssоба файла стилей. если это не конец файла, значит что-то не так с порядком загрузки по умолчанию.
circleix
4

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

Timik
источник
3

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


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

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

.parent-selector .selector {
    ...
}

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

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

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

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

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

Бен Крук
источник
0

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

  .home.home {
    display: none;
  }
Виктор Сл
источник
Хороший совет! Но, к сожалению, не то, что я после.
Фрэнсис Ким
0

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

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

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

Дипеш Рангани
источник
0

Внедрить ваши пользовательские файлы 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

Мэтт
источник