مشاكل مع متغيرات أقل في الموضوع.أقل

Question

أستخدم استعلامات الوسائط أدناه في الموضوع المخصص الخاص بي.أقل مثل

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

ولكن عندما أقوم بتنفيذ هذا الأمر bin/magento setup:static-content:deploy أحصل على متغير @media-common is undefined in file ما هو الخطأ في هذه الحالة?باستخدام الناخر يجمع دون أي أخطاء.

Answer 1

تضمين التغريدة @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 ملف وليس هناك ازدواجية التعليمات البرمجية.

• المثال الخاص بي هنا هو للأنماط الخاصة بالصفحة الرئيسية...لكن هذا يوضح موقفا لم أكن أستخدم فيه النظام بشكل صحيح ولهذا السبب كنت أتلقى هذا الخطأ.آمل أن يساعد هذا