Less.js: less.render tidak berfungsi dengan @import file yang berada di direktori berbeda di nodejs

Dibuat pada 17 Des 2014 · 2Komentar · Sumber: less/less.js

Saya telah menggunakan KURANG untuk mengimplementasikan tema dalam aplikasi saya dan menggunakan modul nodejs less untuk mengkompilasi lebih sedikit file ke CSS tetapi tidak berfungsi dalam satu skenario tertentu.

Saya juga menggunakan Bootstrap untuk aplikasi saya dan menggunakan kode sumber Bootstrap lebih sedikit, saya hanya mengkompilasi css yang saya inginkan di aplikasi saya.

Saya juga dapat mengganti variabel dan mixin Bootstrap di berbagai tema saya. Jadi, saat mengkompilasi Bootstrap saya perlu mempertimbangkan variabel tema dan mixin tertentu juga.

Jadi, bedakan variabel Bootstrap/mixin dan aturan CSS Saya telah membuat 2 file berbeda,

application_variables.less - Ini berisi semua variabel dan mixin Bootstrap yang diperlukan
application.less - Ini berisi semua Aturan CSS Bootstrap yang diperlukan

Struktur direktori Untuk aplikasi

|--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

Penjelasan file mana yang berisi apa?

1. /sample_application/themes/<-theme_name->/mixins/mixins.less
File ini berisi semua mixin khusus aplikasi dan mixin bootstrap yang diganti.

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

2. /sample_application/themes/<-theme_name->/variables/variables.less
File ini berisi semua variabel khusus aplikasi dan variabel bootstrap yang diganti.

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

3. /sample_application/themes/<-theme_name->/<-theme_name->.less
File ini berisi file impor mixin dan variabel untuk tema tertentu.

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

4. /sample_application/themes/theme.less
File ini berisi dua file impor. Yang pertama untuk variabel Bootstrap yaitu application_variables.less dan yang kedua untuk impor file dasar tema tertentu misalnya. merah.less/biru.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
File ini berisi satu file impor yaitu /themes/themes.less dan semua Aturan CSS Bootstrap yang diperlukan.

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

6. /sample_application/resources/libraries/bootstrap/less/application_variables.less
File ini berisi semua variabel dan mixin Bootstrap yang diperlukan.

/*Bootstrap variables and mixins*/

Sekarang saya memiliki satu file skrip simpul yang memberi dosis kompilasi bootstrap lebih sedikit yaitu 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);
    });
})();

Tetapi ketika saya menjalankan skrip ini saya mendapatkan kesalahan berikut

{ [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";' ] }

Kemudian saya mencoba menggunakan jalur relatif juga tetapi masih memberikan kesalahan yang sama

{ [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";' ] }

Sumber

Virbhadrasinh

Komentar yang paling membantu

Perhatikan bahwa karena sumber dipasok ke kompiler sebagai string, Anda perlu secara eksplisit mengatur jalur file asli sehingga kompiler dapat menggunakannya sebagai basis untuk impor dan sebagainya, jika tidak, ia tidak dapat mengetahui semua jalur yang Anda tentukan relatif terhadap (kemungkinan besar itu hanya akan menggunakan cwd tetapi itu cukup "acak" pada saat itu benar-benar datang ke impor dan itu tidak perlu menunjuk ke root proyek Anda lagi ...). Misalnya:

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);
    });
})();

Hal yang sama berlaku untuk opsi paths , jika saya tidak salah dalam hal ini mereka harus absolut atau relatif terhadap filename . Secara umum ada baiknya untuk mempelajari bagaimana lessc sendiri menangani hal-hal ini.

seven-phases-max pada 19 Des 2014

👍18 🎉5 ❤4

Semua 2 komentar

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 pada 19 Des 2014

👍18 🎉5 ❤4

Terima kasih tujuh fase-maks. Solusi ini berfungsi dengan baik sehingga menutup masalah.

Virbhadrasinh pada 19 Des 2014

Apakah halaman ini membantu?

0 / 5 - 0 peringkat