Magento 2 - Переосмислення CSS без використання! Важливо скрізь

Зараз я працюю на сайті 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. Але для всієї роботи, яку я зробив, у мене є простір імен вендерів, який потім поширюватиметься або від сторонньої теми, або від luma / blank.

Наступне, що слід спробувати, - упаковка коду у вбудовані медіа-запити. Я вдаватися в подробиці тут , але в основному він зупиняє ваші стилі завантажуються двічі в styles-l.cssі в styles-m.cssфайлах.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

Звідси все зводиться до специфіки CSS. Якщо є щось інше, то вище, ніж у вас, вам потрібно бути більш конкретним у визначенні свого класу / id у стилях. Можливо, ви захочете опублікувати зображення структури DOM, щоб показати, на що ви орієнтовані та що над тим, як їздити, на що ви хочете націлити.

Якщо у вас є можливість застосувати ваші стилі у файлі _extend.less, це означає, що у вас є проблеми зі специфікою css. Оскільки Magento2 використовує менше компіляції, більшість стилів дуже специфічні. Щоб їх перекрити, вибрані ваші стилі повинні бути більш-менш однаковими. Я не публікую тут деталі самої концепції, оскільки в Інтернеті можна знайти багато статей.

Якщо ви використовуєте налаштування меншого за замовчуванням, то переконайтесь, що ВСЕ ваші менші записані всередині запитів медіа-файлів M2 менше. Якщо ви цього не зробите, у вас виникнуть дублікати CSS і, ймовірно, проблеми з специфікою.

Це все зводиться до специфіки та порядку завантаження, ваш CSS повинен завантажуватися після батьківських тем (або модулів), щоб перекрити це все, що вам потрібно зробити, це відповідати їх специфіці.

Наприклад, якщо використовується батьківська тема

.parent-selector .selector {
    ...
}

Тоді вам потрібно буде написати той самий селектор, якщо з якоїсь причини, яка не працює, вам просто потрібно додати ще один перемикач перед ним. Простий спосіб - додати тіло до нього, оскільки воно охоплює кожен селектор і додає специфіки. Так:

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

Ця стаття містить добру інформацію про специфіку CSS.

Крім того, ви можете перезаписати весь файл

Якщо ви робите багато налаштувань, краще перезаписати весь файл, а не розширювати. Для цього просто додайте файл до своєї теми, використовуючи той самий шлях до файлу та ім’я.

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

  .home.home {
    display: none;
  }

Ви повинні замінити той самий .lessфайл батьківської теми, який ви хочете замінити, як, наприклад, якщо ви хочете перезаписати _theme.lessфайл, тоді ви повинні скопіювати цей файл на дочірню тему сюди (переконайтесь, що той самий шлях батьківської теми)

frontend/Foobarthemes/boofar/web/css/source/_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