Переважаючі стилі порожніх тем у Magento 2

Як би ви вирішили переосмислити стилі навігації для власної теми при успадкуванні від порожньої теми в Magento 2?

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

Крім того, я використовую Bootstrap 3, і я припускаю, що стилі з порожньої теми замінять будь-які вказівки щодо стилів, які відповідають Bootstrap. Який найкращий спосіб підійти до цього?

— Гарет Дайн
джерело

Відповіді:

2 способи, рекомендовані Magento для зміни або розширення стилів з батьківської теми:

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

Розширити:

У своєму тематичному каталозі створіть web/css/sourceпідкаталог. (Ви вже зробили цю частину) Створіть там _extend.lessфайл.

Відповідно до документації :

"Розширення теми за допомогою _extend.less - це найпростіший варіант, коли ви задоволені всім, що має головна тема, але хочете додати більше стилів."

Заміна:

Замість створення _extend.lessфайлу ви створюєте _theme.lessфайл. У цьому випадку вам потрібно скопіювати всі необхідні змінні з батьківського _theme.less, в тому числі ті, які не будуть змінені. Потім внесіть свої зміни.

Згідно з документацією , недолік:

"Вам потрібно відстежувати та вручну оновлювати свої файли кожного разу, коли оновлення _theme.less батьків не оновлюється."

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

Розширити:

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

Скажімо, ви хочете розширити стилі з компонентів кнопки та навігації. У своєму тематичному каталозі створіть 2 файли: _buttons_extend.lessі _navigation_extend.less, потім додайте свої зміни для кожного компонента у відповідний файл.

Потім ви створюєте _extend.lessфайл, додаючи цей код:

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

Заміна:

У своїй темі створіть копію файлу, що відповідає компоненту інтерфейсу, який ви хочете змінити ( _buttons.less, _navigation.lessі т. Д.) Цей файл замінить _buttons.lessбатьківську тему.

Важливо помітити різницю між перехопленням та розширенням .

Докладніше про переосмислення та розширення можна прочитати в цій документації або про CSS у Magento 2 у Посібнику розробника Frontend .

— Луїс Гарсія
джерело

Тож скажімо, у мене є папка Vendor_Namespace, я додаю туди ще одну папку з назвою "web / css / source / _extend.less", а _extend.less-File в веб / css / source / дізнається, де лежить відповідний файл? Я правильно це розумію

— Макс

Так, просто створіть файл web/css/source/_extend.lessі помістіть туди свої стилі.

— Луїс Гарсія

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

— expand

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

— Луїс Гарсія

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

— Goldy

У мене була подібна проблема із використанням Foundation. Офіційний спосіб зробити це - замінити файл менш конкретного модуля та змінити 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>

— Майк Штумпф
джерело

Хороший спосіб вчинити речі. Але питання полягає в тому, щоб "розширити" повну тему і додати до неї більше.

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

Ні, питання стосується переборювання.

— Чорний

Скажімо, ви хочете змінити стилі-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" />
        ...

— Чорний
джерело