مشاكل مع متغيرات أقل في الموضوع.أقل
-
29-09-2020 - |
سؤال
أستخدم استعلامات الوسائط أدناه في الموضوع المخصص الخاص بي.أقل مثل
& when (@media-common = true) { }
ولكن عندما أقوم بتنفيذ هذا الأمر bin/magento setup:static-content:deploy
أحصل على متغير @media-common is undefined in file
ما هو الخطأ في هذه الحالة?باستخدام الناخر يجمع دون أي أخطاء.
المحلول
تضمين التغريدة @media-common
يتم تعيين المتغير مبدئيا في أي منهما:
vendor/magento/theme-frontend-blank/web/css/styles-m.less
vendor/magento/theme-frontend-blank/web/css/styles-l.less
هذا هو إذا كنت تستخدم إما موضوع فارغ أو لمى كوالد.إذا كان الأمر كذلك ، فهذا ينطبق عليك.إذا لم يكن كذلك ، ثم أيا كان الموضوع الرئيسي الخاص بك هو ، يجب أن يكون إعلان وتهيئة هذا المتغير...أو إذا كان موضوع الأصل الذي تستخدمه يدعو آخر لأنه الأصل ، وينطبق الشيء نفسه.
نلقي نظرة على styles-m.less
و styles-l.less
الملفات لمعرفة الترتيب الذي يتم استيراد ملفات أقل.يمكنك أيضا إضافة شكل من أشكال التسجيل في \Less_Parser::parseFile()
.
الطريقة التي حصلت حول هذا هو استخدام استيراد إشارة أقل مستندات أقل:خيار الاستيراد المرجعي, ، والتي سوف لا سحب في التعليمات البرمجية داخل قال أقل ملف ، وسوف تجعل فقط الملفات المتاحة في نطاق الملف الذي يطلب الاستيراد.
مثال على ما قمت باستيراده في الجزء العلوي من ملف مخصص أقل:
@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
الآن ، مع كل ما قيل هنا هو كيكر ، لا تحتاج حقا للقيام بذلك.لم؟حسنا ، ليست أنماط كس داخل حراس المغلق, ، في هذه الحالة @media-common = true
يعني فقط أن يتم استدعاؤها مع styles-m.less
ملف?نعم ، لأن م2 من المفترض أن تكون متحركة أولا وبالتالي فإن styles-m.less
الملف هو الملف الوحيد (حفظ بعض البريد الإلكتروني أقل الملفات وأعتقد أن عدد قليل من الآخرين) التي لديها في الواقع @media-common
تعيين إلى true
(وهناك عدد قليل فقط من الملفات التي حتى تعيين هذا المتغير ، الفترة).
لذلك أي شيء داخل حارس كس الذي لديه حالة @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
إذا لم يتم إنشاؤه بالفعل مستندات ديف:.طلب المغلق ل .بحث أقل - المزيد هنا) يحصل تحميلها من قبل styles-l.css
.
هذا يعني أنه يمكنك حرفيا التغلب على هذا الخطأ من خلال تحديد @media-common: true;
في الجزء العلوي من ملف مخصص أقل الخاص بك وبناء على ما وصفته أعلاه وما أفهمه من التعليمات البرمجية حتى الآن ، يجب أن تأخذ الرعاية من الخطأ.
ها هي المشكلة: سواء كنت بما في ذلك source/lib/_responsive.less
& source/lib/variables/_responsive.less
الملفات أو تحديد ملفاتك الخاصة @media-common: true;
في الجزء العلوي من الملف المخصص الخاص بك ، سيؤدي ذلك إلى الكتابة فوق ملف @media-common: false;
التعيين في styles-l.less
, ، لذلك ستحصل على تكرار التعليمات البرمجية في كليهما styles-m.less
و styles-l.less
.لا أرى أي طريقة للتغلب على ذلك في الوقت الحالي.المشكلة الجذرية لهذا هي أن ملفاتنا المخصصة الأقل لا يتم تحميلها بعد كلاهما styles-m.less
و styles-l.less
أو أن @media-common
لا يتم إدخال قيمة المتغير في نطاق ملفاتنا المخصصة الأقل.لا ينبغي أن يكون هذا هو الحال ، إذا كنا نستورد عادتنا أقل عبر _extend.less
الملف ، الذي المستندات (اقتراح) ، كما لديك ما يلي في نهاية كل من styles-m.less
و styles-l.less
:
//@magento_import 'source/_extend.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";
ما وجدته هو أنه إما أو, ليس كلاهما.حتى في هذه الحالة عندما م2 كان يحاول معالجة طلب ل 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
ملف وليس هناك ازدواجية التعليمات البرمجية.
- المثال الخاص بي هنا هو للأنماط الخاصة بالصفحة الرئيسية...لكن هذا يوضح موقفا لم أكن أستخدم فيه النظام بشكل صحيح ولهذا السبب كنت أتلقى هذا الخطأ.آمل أن يساعد هذا