Проблемы с меньшим количеством переменных в _theme.Меньше

Question

Я использую приведенные ниже медиа-запросы в своей пользовательской _theme.меньше нравится

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

но когда я выполняю эту команду bin/magento setup:static-content:deploy Я получаю переменную @media-common is undefined in file что же не так в этом случае?Использование grunt компилируется без каких-либо ошибок.

Answer 1

@fefe Тот Самый @media-common переменная изначально задается в любом:

• vendor/magento/theme-frontend-blank/web/css/styles-m.less

• vendor/magento/theme-frontend-blank/web/css/styles-l.less

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

Взгляните на styles-m.less и styles-l.less файлы, чтобы увидеть порядок, в котором импортируется меньшее количество файлов.Вы также можете добавить некоторую форму ведения журнала по адресу \Less_Parser::parseFile().

Способ, которым я смог обойти это, - использовать импорт с меньшим количеством ссылок Меньше Документов:опция импорта ссылок, который будет нет вставьте код в указанный файл Less, он просто сделает файлы доступными в пределах области действия файла, запрашивающего импорт.

Пример того, что я импортировал в верхней части пользовательского файла Less:

@import (reference) "../source/lib/variables/_responsive.less"; @import (reference) "../source/lib/_responsive.less";

* Обратите внимание на путь, который я использую здесь, относительно пользовательского пути к файлу моей пользовательской темы, не относящегося к конечному var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/ путь.

Иерархия каталогов моей пользовательской темы выглядит следующим образом: app/design/frontend/<Vendor>/<theme>/web/css/custom/custom.less.

Файлы, которые я хочу импортировать, находятся здесь:

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/_responsive.less

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/source/lib/variables/_responsive.less

Мой пользовательский файл, который будет выполнять импорт, в конечном итоге будет находиться здесь:

• var/view_preprocessed/css/frontend/<Vendor>/<theme>/<locale>/css/custom/custom.less

Теперь, учитывая все сказанное, вот в чем загвоздка: на самом деле вам не нужно этого делать.Почему?Ну, разве стили css не входят в CSS - Охранники, в данном случае @media-common = true предназначен только для вызова с помощью styles-m.less файл?Да, потому что предполагается, что M2 в первую очередь должен быть мобильным, и, следовательно, styles-m.less file - это единственный файл (за исключением нескольких файлов без электронной почты и, я думаю, нескольких других), который на самом деле имеет @media-common установлено значение true (и есть только несколько файлов, которые даже устанавливают эту переменную, period).

Итак, все, что находится внутри CSS Guard, которое имеет условие @media-common = true предназначен для запуска всегда, за исключением случаев, когда styles-l.less вызывается файл. styles-l.less Наборы @media-common Для false в качестве styles-m.less файл должен был уже загрузить эти "общие" стили...и если вы заглянете в vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml ты это увидишь styles-m.css (который генерируется из styles-m.less если он еще не сгенерирован Документы разработчика:запрос .css для поиска .less - Еще Здесь) загружается до styles-l.css.

Это означает, что вы могли бы буквально обойти эту ошибку, определив @media-common: true; в верхней части вашего пользовательского файла Less и на основе того, что я описал выше, и того, что я пока понимаю в коде, это должно устранить ошибку.

Вот в чем проблема: Независимо от того, включаете ли вы source/lib/_responsive.less & source/lib/variables/_responsive.less файлы или определение вашего собственного @media-common: true; в верхней части вашего пользовательского файла это приведет к перезаписи @media-common: false; назначение в styles-l.less, таким образом, вы получите дублирование кода в обоих styles-m.less и styles-l.less.На данный момент я не вижу никакого способа обойти это.Основная проблема этого заключается в том, что наши пользовательские файлы Less не загружаются после и то , и другое styles-m.less и styles-l.less или что @media-common значение переменной не попадает в область действия наших пользовательских файлов Less.Этого не должно быть, если мы импортируем наши пользовательские файлы через _extend.less файл, который (предлагается) в документах, поскольку у вас есть следующее в конце обоих styles-m.less и styles-l.less:

//@magento_import 'source/_extend.less';

Я надеюсь, что это дало вам понимание и немедленное решение вашей проблемы.

Если вы или кто-нибудь еще придумаете лучшее решение, я весь внимание.

Обновить Поэтому не обращайте внимания на то, что я упомянул выше относительно дублирования кода.В моем случае я одновременно добавлял явное включение моего пользовательского css на страницу и Я также добавил свой пользовательский файл less в мою тему _extend.less.

Я модифицировал app/design/frontend/<Vendor>/<theme>/Magento_Cms/layout/cms_index_index.xml включить следующее:

<head> <!-- ADD PAGE-SPECIFIC STYLES SHEETS HERE --> <css src="css/pages/homepage.css" /> </head>

и у меня также была запись в app/design/frontend/<Vendor>/<theme>/web/css/source/_extend.less из:

@import "../pages/homepage.less";

Что я обнаружил, так это то, что это либо "или", а не и то, и другое.Итак, в данном случае, когда M2 пытался обработать запрос на http://vappey.dev/static/frontend/<Vendor>/<theme>/<locale>/css/pages/homepage.css это позволило бы загрузить соответствующие homepage.less файл, и в этом файле не было бы @media-common в пределах его компетенции, так что ошибка была красноречивой.Чтобы обойти это, добавьте ссылки на импорт, как я упоминал выше, и они не будут дублировать код.Кроме того, но удаляя запись из _extend.less мой styles-m.less и styles-l.less не буду искать homepage.less файл, и в нем нет дублирования кода.

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