marceloverdijk @ سأكون فضوليًا هنا لمعرفة رأيك في رقم 331 وكيف يجب تعديل المسارات عند استيراد أوراق الأنماط.

القاعدة بسيطة: فقط قم باستيراد الملفات التي تنتهي بـ .less أو التي ليس لها امتداد ، والباقي يترك للمتصفح. لذا <strong i="6">@import</strong> "foo.css" تبقى دون تغيير، <strong i="8">@import</strong> "foo" و <strong i="10">@import</strong> "foo.less" يتم تحليل ويتم استيراد الملفات.

حسنًا ، القاعدة واضحة. شكرا.

ولكن هل لديك أي فكرة عن سبب استيراد Google Font بالفعل في ذلك الوقت؟
الاختلاف الوحيد هو أنني أستخدم Env.js و Rhino بدلاً من متصفح حقيقي.

هل المنطق الأقل قد يستخدم شيئًا ما لتحديد ما إذا كان يجب استيراده أم لا وهو أمر غير مفهوم (أو غير صحيح) بواسطة Env.js؟

نقدر أي مساعدة.

لاحظ أنني أستخدم هذا لتجميع أقل:

نتيجة فار var p = new less.Parser () ؛ p.parse (المدخلات ، الوظيفة (e ، الشجرة) {result = tree.toCSS () ؛}) ؛

1 سؤال عن القاعدة. هل الاقتباسات مهمة؟

لقد لاحظت هذا في أقل مصدر import.js:

    if (path instanceof tree.Quoted) {
        this.path = /\.(le?|c)ss$/.test(path.content) ? path.content : path.content + '.less';
    } else {
        this.path = path.value.content || path.value;
    }

الحل الذي أستخدمه هو إلحاق &.css بعنوان URL الخاص بالخط لخداع المحلل اللغوي LESS للتعامل معه مثل استيراد CSS عادي. مثل ذلك:

<strong i="7">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans&.css);

راجع للشغل ، أجد أنه من المؤسف جدًا أن المصممين الأصليين لـ LESS لم يستخدموا توجيهًا منفصلاً @include ، بدلاً من إعادة استخدام المسكين القديم @import ...

أعتقد أنه يجب أن يعمل بدون ذلك كما هو مقترح في الاختبار https://github.com/cloudhead/less.js/blob/master/test/less/import.less

الذي يحتوي على

<strong i="8">@import</strong> url("import/import-test-a.less");
//<strong i="9">@import</strong> url("import/import-test-a.less");
<strong i="10">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

#import-test {
  .mixin;
  width: 10px;
  height: <strong i="11">@a</strong> + 10%;
}

ويتوقع

<strong i="15">@import</strong> "import-test-d.css";

<strong i="16">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);
#import {
  color: red;
}
.mixin {
  height: 10px;
  color: red;
}
#import-test {
  height: 10px;
  color: red;
  width: 10px;
  height: 30%;
}

الذي يحتوي على خطوط جوجل استيراد لا يزال.
لم أختبر هذه الأشياء بنفسي ولكن أفترض أنها تمر.

ملاحظة: هذا استيراد خطوط Google هو الجزء الوحيد الذي لا يمر في مكتبة lesscss4j مفتوحة المصدر.
جميع اختبارات التوافق الأخرى تمر الآن.

لذلك أنا حريص حقًا على حل هذه المشكلة الأخيرة قبل إصدارها. آمل أن يتمكن شخص ما من المساعدة.

شكرًا لك maranomynet على الحل الرائع لخطوط Google Web Fonts في LESS (كنت أواجه مشكلة في استخدام import في الإصدار LESS 1.1.3). أوافق على أن LESS تعامل مع هذا الجزء من بناء الجملة بطريقة مؤسفة.

حتى أنني أصبحت مرتبكة أكثر الآن.

لقد قمت بإنشاء مشروع ويب بسيط وأضفت الكود أدناه إلى قسم الرأس:

<link rel="stylesheet/less" type="text/css" href="/less/google.less">
<link rel="stylesheet/less" type="text/css" href="/bootstrap/bootstrap.less">
<script src="/js/less-1.1.4.js" type="text/javascript"></script>

تجميع Twitter Bootstrap يعمل ولكن google.less لا يعمل.
يحتوي google.less هذا فقط على السطر أدناه المنسوخ من LESS اختبار التوافق import.less

<strong i="11">@import</strong> url(http://fonts.googleapis.com/css?family=Open+Sans);

الخطأ الذي أتلقاه في المتصفح هو:

تعذر تحميل http: // localhost : 8888 / less / http://fonts.googleapis.com/css؟family=Open+Sans (404)
http: // localhost : 8888 / less / google.less

الآن بدأت حقًا في التساؤل عن اختبار التوافق غير القابل للاستيراد ....

إضافة & .css قبل إغلاق استيراد عنوان url

من عند
import url (http://fonts.googleapis.com/css؟family=Open+Sans) ؛

ل
import url (http://fonts.googleapis.com/css؟family=Open+Sans&css) ؛

واجهت مشكلة مماثلة ، لذا إذا كان هذا يساعد أي شخص: كنت أحاول استيراد خطوط google متعددة مفصولة بعلامة "|":
import url (http://fonts.googleapis.com/css؟family=Inconsolata|Cantarell|Daughter&.css) ؛
مما قد يعطي خطأ "إغلاق مفقود) لعنوان url ()"

تم حل الخطأ عن طريق التفاف عنوان URL بين علامتي اقتباس (ملاحظة: يجب أن تكون & .css في النهاية ، وإلا حدث خطأ استيراد 404). تم أيضًا تحميل جميع الخطوط بنجاح:
import url ("http://fonts.googleapis.com/css؟family=Ubuntu+Mono|Cantarell|Architects|Daughter&.css") ؛

enoex نصائح جيدة: D شكرا !!!!

خطأ ، من الصعب معرفة سبب إغلاق هذه المشكلة. لقد اكتشف المستخدمون اختراقًا مخادعًا بشكل لا يصدق حوله ، والذي يمكن أن ينكسر إذا قررت Google إرفاق معنى بـ & .css؛ هذا يحتاج إلى إصلاح في lessc. يجب أن توجد طريقة ما لفرض import ليتم أخذها حرفيًا.

أنا موافق. أي اقتراحات؟

<strong i="6">@import</strong> css url(...);

هو احتمال. سيسمح لك أيضًا بفرض استيراد أقل بامتداد .css.

يبدو بناء الجملة هذا جيدًا (لست الشخص الذي يكتب المحلل اللغوي ، لذلك لا أعرف مدى ملاءمته).

قلقي الوحيد هو المترجمون الآخرون less . لقد عملت الكود الذي واجهت مشكلة معه بشكل جيد للمطورين الذين قاموا بكتابته ، ربما لأن أقل مترجم لديهم لا يعمل حتى وقت الترجمة @import . لذا حتى إذا تم إصلاح هذا في lessc ، فمن المحتمل أن أستمر في استخدام الاختراق "& .css". لا يوجد شيء يمكنك القيام به حيال ذلك بالرغم من ذلك.

أي شخص وجد حلا؟

لقد اكتشفت أن إلحاق "& .css" وتغليف عنوان URL بعلامات اقتباس لا يؤدي إلا إلى حل مشكلات الترجمة - لا تزال الخطوط التي أحددها لا يتم عرضها ...

أعيد فتحه لأنه يبدو أنه لا يزال يمثل مشكلة - أليس كذلك؟

سيكون الإصلاح البسيط هو عدم إلحاق أي شيء بعنوان url إذا كان يحتوي على معلمات (على سبيل المثال؟ family = x)

ntoft لا يمكنني إعادة إنتاج الخطأ بعد الآن .. باستخدام lessc .. ما هي المشكلة المتبقية بالضبط؟

شكرا للمتابعة.

أنا أستخدم نهج "append & .css" وهو يعمل الآن (خطأ مستخدم جزئي: - /) كان مجرد فضول لمعرفة ما إذا كانت هناك طريقة أفضل. ومع ذلك ، يبدو أنه يعمل ، لذا لا تتردد في إغلاقه.

شكرا.

سيكون من الجيد لو نجح الأمر بدون نهج الإلحاق .css .. فهل لديك مثال على ذلك؟

أعتقد أنني أخطأت في الفهم ... المشكلة هي أنه يتم استيراد ملف css عندما لا تريد استيراده.

ربما في 1.4.0 @import يجب تركها بمفردها ويجب دائمًا تضمين @include

نقل المناقشة إلى قضية واحدة # 1185

مطلوب فقط للهروب من أحرف مثل هذه ، import url (https \: \ / \ / fonts.googleapis.com \ / css؟ family = Orbitron & .css) ؛

@ jas-naz الطريقة الصحيحة والأكثر قابلية للقراءة هي:

<strong i="6">@import</strong> (css) url(https://fonts.googleapis.com/css?family=Orbitron);

لمزيد من المعلومات ، راجع http://lesscss.org/features/#import -atrules-feature-import-options.

مرحبًا ، هناك اختراق آخر لتحقيق ذلك وهو إضافة "#css" في نهاية عنوان url ، مثل هذا:

<strong i="6">@import</strong> url('https://fonts.googleapis.com/css?family=Paytone+One#css');

تضمين التغريدة

فكرة سيئة. في الإصدارات الحديثة سيقوم Less بمعالجة هذا الملف (بدلاً من ترك الاستيراد كما هو).
هذا هو السبب في أن (css) أمامه إلزامي. (في الإصدارات السابقة كان مجرد سلوك خاطئ حيث قرر المترجم "بعض" سلسلة css في عنوان url بدلاً من الامتداد المناسب المفقود في هذه الحالة بالذات).