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