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 .
web/css/source/_extend.less
и поместите туда свои стили.У меня была похожая проблема с использованием 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, чем пытаться переопределить все различные модули. Вы можете сделать это в:
http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html#layout_markup_css_remove
источник
Допустим , вы хотите переопределить styles-m.css , затем поместите копию
web/css
вашей темы, назовите ее custom-styles-m.css .Затем используйте этот код в своих темах default_head_blocks.xml :
источник