Переопределение пустых стилей темы в Magento 2

Как бы вы переопределили стили навигации для пользовательской темы при наследовании от пустой темы в Magento 2?

У меня есть theme.cssфайл в моей app/design/frontend/<Vendor>/<theme>/web/cssпапке, но я знаю, что Magento 2 использует LESS. Я могу легко переопределить стили в моей theme.cssтаблице стилей, но я не хочу продолжать использовать !important.

Кроме того, я использую Bootstrap 3, и я предполагаю, что стили из пустой темы будут переопределять любые инструкции стиля, которые совпадают в Bootstrap. Каков наилучший способ приблизиться к этому?

— Гарет Дейн
источник

Ответы:

Magento рекомендует 2 способа переопределения или расширения стилей родительской темы:

1. Простой способ

Расширение:

В каталоге вашей темы создайте web/css/sourceподкаталог. (Вы уже сделали эту часть) Создайте _extend.lessфайл там.

Согласно документации :

«Расширение темы с помощью _extend.less - самый простой вариант, когда вы довольны всем, что есть в родительской теме, но хотите добавить больше стилей».

Override:

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

Согласно документации , недостатком является:

«Вам нужно отслеживать и обновлять свои файлы вручную каждый раз, когда обновляется _theme.less».

2. Структурированный способ

Расширение:

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

Допустим, вы хотите расширить стили от кнопок и компонентов навигации. В каталоге вашей темы создайте 2 файла: _buttons_extend.lessи _navigation_extend.lessзатем добавьте свои изменения для каждого компонента в соответствующий файл.

Затем вы создаете _extend.lessфайл, добавляя этот код:

@import '_buttons_extend.less'; 
@import '_navigation_extend.less';

Override:

В вашей теме, создать копию файла , соответствующий компонент пользовательского интерфейса вы хотите изменить ( _buttons.less, _navigation.less, и т.д.) Этот файл будет переопределение _buttons.lessродительской темы.

Важно отметить разницу между переопределением и расширением .

Вы можете прочитать больше о переопределении и расширении в этой документации или о CSS в Magento 2 в Руководстве разработчика Frontend .

— Луис Гарсия
источник

Допустим, у меня есть папка Vendor_Namespace, я добавляю туда еще одну папку с именем "web / css / source / _extend.less" и _extend.less-File в web / css / source / будет знать, где находится соответствующий файл? Правильно ли я понимаю

— Макс

Да, просто создайте файл web/css/source/_extend.lessи поместите туда свои стили.

— Луис Гарсия

Я создал файл _extend.less с импортом _slider.less: <theme_folder> / css / source / оба файла находятся по одному и тому же пути, но не работают, все правила в _slider.less не найдены в сгенерированных файлах .css, Я в режиме разработчика и запускаю "php magento setup: static-content: deploy"

— xzegga

Вы удалили кеш вашего браузера?

— Луис Гарсия

Могу ли я переопределить <theme_folder> / css / source / lib / variable? как я могу изменить переменную меньшего файла? (допустим, я хочу переопределить фон @ кнопки, например) - мне нужно написать его внутри _buttons_extend.less или я могу переопределить все lin / web / css / source / lib / variable

— Goldy

У меня была похожая проблема с использованием Foundation. Официальный способ сделать это - переопределить файл less конкретного модуля и изменить там css. Затем он будет подхвачен Magento во время компиляции

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/debug-theme.html#debug-theme-style

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css-preprocess.html

В итоге я удалил все CSS-файлы по умолчанию, созданные Magento. Я обнаружил, что гораздо проще написать собственный CSS, особенно с использованием такой среды, как Bootstrap, чем пытаться переопределить все различные модули. Вы можете сделать это в:

app/design/frontend/{vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <remove src="css/styles-m.css" />
    <remove src="css/styles-l.css" />
    <remove src="css/print.css" />
    <remove src="css/styles.css" />
</head>
</xml>

— Майк Штумпф
источник

Хороший способ совершать вещи. Но вопрос в том, чтобы «расширить» полную тему и добавить к ней больше.

— Мигель Фелипе Гильен Кало

Нет, вопрос о переопределении.

— Черное

Допустим , вы хотите переопределить styles-m.css , затем поместите копию web/cssвашей темы, назовите ее custom-styles-m.css .

Затем используйте этот код в своих темах default_head_blocks.xml :

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <remove src="css/styles-m.css" />
        <css src="css/custom-styles-m.css" />
        ...

— черный
источник