عدم استجابة Less.js في Chrome

أثارت وظيفة Less.js في Firefox مع البقاء غير مستجيب في Chrome مخاوف. لتحديد السبب، دعنا نفحص الكود المقدم:

@highlight: #cb1e16;
@shade1: #cb1e16;
@tone1: #5c6f7d;
@grad1: #e6edf3;
@grad2: #8a8d92;
@text1: #333e44;

header, footer, section, article, nav, aside { display: block; }

.grad {
  background: @grad2;
  background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
  background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
}

html {
  .grad;
  min-height: 100%;
}

يبدو أن الكود يطبق Less.js باستخدام بنية صالحة لمعالج CSS المسبق. ومع ذلك، فإن السبب يكمن في البيئة والإعدادات المستخدمة. وفقًا للوثائق المقدمة:

حدود البرنامج النصي لمتصفح Less.js في Chrome

"لن يعمل البرنامج النصي لمتصفح Less.js حاليًا إذا كنت تستخدم Chrome و يبدأ المسار إلى صفحتك بـ "file:///...". ويرجع ذلك إلى مشكلة معروفة في Chrome."

وهذا يعني أن Less.js قد لا يعمل في Chrome عند استخدام الملفات المحلية بدلاً من ذلك. من خادم ويب.

الحل

لحل المشكلة، جرب ما يلي:

• خدمة الملفات باستخدام الويب الخادم: قم بتحميل ملفاتك إلى خادم الويب والوصول إليها باستخدام عنوان URL (على سبيل المثال، http://example.com/style.less).
• استخدم إعداد مضيف محلي: قم بتشغيل خادم تطوير محلي (على سبيل المثال، خادم PHP المدمج، Python's SimpleHTTPServer) والوصول إلى الملفات من خلال عنوان مثل http://localhost:8000/style.less.
• فكر في البدائل: استخدم أداة معالجة Less.js مثل grunt أو gulp لتجميع ملفات أقل أثناء التطوير، مما يضمن توافقها مع Chrome.