Skip to content

Instantly share code, notes, and snippets.

@aseemk
Created May 2, 2011 18:37
Show Gist options
  • Save aseemk/952109 to your computer and use it in GitHub Desktop.
Save aseemk/952109 to your computer and use it in GitHub Desktop.
Less on Node: @import path isn't relative to stylesheet
var express = require('express');
var app = express.createServer();
app.configure(function () {
app.use(express.compiler({
src: __dirname,
enable: ['less']
}));
app.use(express.static(__dirname));
app.use(express.errorHandler({
dumpExceptions: true,
showStack: true
}));
});
app.listen(8888);
console.log('Listening at http://localhost:8888/ ...');
@COLOR: 'red';
.container (@marginVert: 1em) {
margin: @marginVert auto;
}
html {
color: @COLOR;
.container();
}
@import 'a';
body {
color: @COLOR;
.container(2em);
}
@aseemk
Copy link
Author

aseemk commented May 2, 2011

(Gist doesn't show directories in filenames; place a.less and b.less inside a styles directory next to app.js.)

Run this Express app (node app.js), open your browser, and view http://localhost:8888/styles/a.css -- it should properly return:

html {
    color: 'red';
    margin: 1em auto;
}

But if you try to visit http://localhost:8888/styles/b.css in your browser, it won't work. Your node terminal will show:

file 'a.less' wasn't found.

Seems incorrect, no? When I debugged, it seems that Less operates off of the current working directory -- which is the directory above styles if you ran node app.js.

@import paths should work relative to the stylesheet, no? That's how regular CSS works in the browser, and I'm guessing LESS in the browser too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment