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

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -