node.js - less.render is not working in nodejs with multiple import files which are in different directories -
i have used less implement theming in application , using nodejs less module compiling less files css not working in 1 particular scenario.
i using bootstrap application , using bootstrap less source code compiling css want in application.
i can override bootstrap variables , mixins in various themes. so, while compiling bootstrap need consider theme variables , mixins well.
so, differentiate bootstrap variables/mixins , css rules have created 2 different files,
- application_variables.less - contains required bootstrap variables , mixins
 - application.less - contains required bootstrap css rules
 
directory structure application
| |--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   explanation of file contains what?
1. /sample_application/themes/<-theme_name->/mixins/mixins.less :- file contains application specific mixins , overridden bootstrap mixins.
2. /sample_application/themes/<-theme_name->/variables/variables.less :- file contains application specific variables , overridden bootstrap variables.
3. /sample_application/themes/<-theme_name->/<-theme_name->.less :- file contains file imports of mixins , variables particular theme.
@import "./variables/variables"; @import "./mixins/mixins";   4. /sample_application/themes/theme.less :- file contains 2 file imports. first 1 bootstrap variables application_variables.less , second 1 particular themes' base file imports eg. red.less/blue.less
@import "application_variables.less"; @import "red/red.less";   5. /sample_application/resources/libraries/bootstrap/css/application.less :- file contains 1 file import /themes/themes.less , required bootstrap css rules.
@import "theme.less"; /*bootstrap css rules*/   6. /sample_application/resources/libraries/bootstrap/less/application_variables.less :- file contains required bootstrap variables , mixins.
now have 1 node script file dose bootstrap less compilation 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);     }); })();   but when run script getting following error
{ [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:     [ '@import "application_variables.less";',       '@import "red/red.less";' ] }   then tried using relative paths still giving same error
{ [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:     [ '@import "./../resources/libraries/bootstrap/less/application_variables.less";',       '@import "red/red.less";' ] }      
note since source supplied compiler string need explicitly set original file path compiler can use base 1 imports , so, otherwise can't know paths specify relative (most use cwd it's pretty "random" @ time comes imports , not necessary point project root anymore...). e.g.:
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 go     }, function(e, output) {         console.log(output.css);     }); })();   the same goes paths option, if i'm not mistaken in case should either absolute or relative filename. in general it's idea learn how lessc itself handles these things.
Comments
Post a Comment