Less.js: less.render لا يعمل معimport الملفات الموجودة في أدلة مختلفة في nodejs

تم إنشاؤها على ١٧ ديسمبر ٢٠١٤ · 2تعليقات · مصدر: less/less.js

لقد استخدمت LESS لتنفيذها في تطبيقي واستخدام وحدة nodejs less لتجميع ملفات أقل إلى CSS ولكنها لا تعمل في سيناريو واحد معين.

أنا أستخدم أيضًا Bootstrap لتطبيقي وأستخدم Bootstrap أقل من التعليمات البرمجية المصدر ، فأنا أقوم فقط بتجميع ملف css الذي أريده في تطبيقي.

يمكنني أيضًا تجاوز متغيرات Bootstrap والمزج في السمات المختلفة الخاصة بي. لذلك ، أثناء تجميع Bootstrap ، أحتاج إلى التفكير في متغيرات وخلطات سمة معينة أيضًا.

لذلك ، قم بالتفريق بين متغيرات Bootstrap / mixins وقواعد CSS التي أنشأت ملفين مختلفين ،

application_variables.less - يحتوي على جميع متغيرات Bootstrap والمزج
application.less - يحتوي على جميع قواعد Bootstrap CSS المطلوبة

هيكل الدليل للتطبيق

|--sample_application
    |--resources
    |   |--libraries
    |      |--bootstrap
    |           |--css
    |           |   |--application.less
    |           |--less
    |           |   |--application_variables.less    
    |--themes
        |--red
        |   |--mixins
        |   |   |--mixins.less
        |   |--variables
        |   |   |--variables.less    
        |   |--red.less    
        |--blue
        |   |--mixins
        |   |   |--mixins.less
        |   |--variables
        |   |   |--variables.less    
        |   |--blue.less    
        |--themes.less

شرح أي ملف يحتوي ماذا؟

1. /sample_application/themes/<-theme_name->/mixins/mixins.less
يحتوي هذا الملف على جميع الخلطات الخاصة بالتطبيق وخلطات التمهيد التي تم تجاوزها.

.my-hover-mixin(@color) {
   &:hover {
       border: 2px solid @color;
    }
}
/*Other theme specific mixins*/

2. /sample_application/themes/<-theme_name->/variables/variables.less
يحتوي هذا الملف على جميع المتغيرات الخاصة بالتطبيق ومتغيرات تمهيد التشغيل التي تم تجاوزها.

@text-color:#333333;
@border-color:#999999;
@body-bg-color:red;
/*Other theme specific variables*/

3. /sample_application/themes/<-theme_name->/<-theme_name->.less
يحتوي هذا الملف على ملف واردات من mixins والمتغيرات لهذا الموضوع المحدد.

<strong i="10">@import</strong> "./variables/variables.less";
<strong i="11">@import</strong> "./mixins/mixins.less";

4. /sample_application/themes/theme.less
يحتوي هذا الملف على ملفين مستوردين. الأول لمتغيرات Bootstrap وهو application_variables.less والثاني لاستيراد الملفات الأساسية لموضوعات معينة على سبيل المثال. أحمر. عديم / أزرق

<strong i="17">@import</strong> "application_variables.less";
<strong i="18">@import</strong> "red/red.less";

5. /sample_application/resources/libraries/bootstrap/css/application.less
يحتوي هذا الملف على ملف استيراد واحد وهو /themes/themes.less وجميع قواعد Bootstrap CSS المطلوبة.

<strong i="24">@import</strong> "theme.less";
/*Bootstrap CSS rules*/

6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
يحتوي هذا الملف على جميع متغيرات Bootstrap والخلطات المطلوبة.

/*Bootstrap variables and mixins*/

لدي الآن ملف نصي واحد للعقدة يقوم بجرعة أقل من تجميع bootstrap وهو compile-bootstrap.js

var fs = require("fs");
var less = require('less');

(function() {
    var bsLessContent = fs.readFileSync("sample_application/resources/libraries/bootstrap/css/application.less");
    less.render(bsLessContent.toString(), {
        paths : [ "sample_application/themes/", "sample_application/resources/libraries/bootstrap/less/"],
        compress : true
    }, function(e, output) {
        fs.writeFileSync("sample_application/resources/libraries/bootstrap/css/application.css", output);
    });
})();

ولكن عندما أقوم بتشغيل هذا البرنامج النصي ، فإنني أتلقى الخطأ التالي

{ [Error: 'application_variables.less' wasn't found]
   type: 'File',
   message: '\'application_variables.less\' wasn\'t found',
   filename: 'sample_application\\themes\\theme.less',
   index: 18,
   line: 2,
   callLine: NaN,
   callExtract: undefined,
   column: 0,
   extract:
    [ '<strong i="6">@import</strong> "application_variables.less";',
      '<strong i="7">@import</strong> "red/red.less";' ] }

ثم حاولت استخدام المسارات النسبية أيضًا ولكن لا تزال تعطي نفس الخطأ

{ [Error: './../resources/libraries/bootstrap/less/application_variables.less' wasn't found]
   type: 'File',
   message: '\'./../resources/libraries/bootstrap/less/application_variables.less\' wasn\'t found',
   filename: 'sample_application\\themes\\theme.less',
   index: 18,
   line: 2,
   callLine: NaN,
   callExtract: undefined,
   column: 0,
   extract:
    [ '<strong i="11">@import</strong> "./../resources/libraries/bootstrap/less/application_variables.less";',
      '<strong i="12">@import</strong> "red/red.less";' ] }

مصدر

Virbhadrasinh

التعليق الأكثر فائدة

لاحظ أنه نظرًا لأن المصدر يتم توفيره للمترجم كسلسلة ، فأنت بحاجة إلى تعيين مسار الملف الأصلي بشكل صريح حتى يتمكن المترجم من استخدامه كأساس للواردات وهكذا ، وإلا فإنه لا يمكنه معرفة كل تلك المسارات التي تريدها تحديد نسبي لـ (على الأرجح أنه سيستخدم cwd ولكنه "عشوائي" إلى حد كبير في الوقت الذي يتعلق فيه بالفعل بالواردات ولا يشير بالضرورة إلى جذر مشروعك بعد الآن ...). على سبيل المثال:

var fs   = require('fs'),
    path = require('path'),
    less = require('less');

(function() {
    var src = "foo/bar/baz.less";
    less.render(fs.readFileSync(src).toString(), {
        filename: path.resolve(src), // <- here we go
    }, function(e, output) {
        console.log(output.css);
    });
})();

الأمر نفسه ينطبق على الخيار paths ، إذا لم أكن مخطئًا في هذه الحالة ، فيجب أن تكون إما مطلقة أو مرتبطة بـ filename . بشكل عام ، من الجيد معرفة كيفية تعامل lessc نفسه مع هذه الأشياء.

seven-phases-max في ١٩ ديسمبر ٢٠١٤

👍18 🎉5 ❤4

ال 2 كومينتر

var fs   = require('fs'),
    path = require('path'),
    less = require('less');

(function() {
    var src = "foo/bar/baz.less";
    less.render(fs.readFileSync(src).toString(), {
        filename: path.resolve(src), // <- here we go
    }, function(e, output) {
        console.log(output.css);
    });
})();

seven-phases-max في ١٩ ديسمبر ٢٠١٤

👍18 🎉5 ❤4

شكرا سبع مراحل كحد أقصى. هذا الحل يعمل بشكل جيد ومن ثم إغلاق المشكلة.

Virbhadrasinh في ١٩ ديسمبر ٢٠١٤

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات