Node js - Less css cannot find file to import

Question

I have two Less files in the public/stylesheets. I am using Express.js to serve them as CSS files.

The first file, one.less looks like this:

@import "another.less";

h1 {
    color: red;
}

The second file, another.less looks like this:

p {
    color: red;
}

When I try to load the page, the server quits with the error:

file 'another.less' wasn't found.

I have also tried an absolute path, but it didn't work.

This is my Express.js configuration:

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }))
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
});

Without knowing 'less', the error is about the file another.less not found, but you provide another.css, is that right? — topskip
– topskip, Commented Jan 17, 2012 at 20:20
Sorry, those are actually .less files. I fixed it. Thanks for catching that! — rovaughn
– rovaughn, Commented Jan 17, 2012 at 21:22

Joel · Accepted Answer · 2012-03-19 01:42:34Z

3

You should be using connect-less for this now. The original less compiler you're using above is a part of connect, actually, and if you check out the current issue list, you'll see that TJ opted to not support less any further in connect due to the compilers being too different (a case of "can't make everyone happy") :

https://github.com/senchalabs/connect/pull/174

You can look up connect-less here : https://github.com/MartinodF/connect-less

I'll put the steps for install here, but understand they could become dated (check the github page if this doesn't work, and let me know and I'll sync up):

Use NPM to install connect-less

npm install connect-less

Then load it in your app, specifying the source (and optionally destination) directory

app.use(require('connect-less')({ src: __dirname + '/public/' }));

This worked flawlessly for me on an armv7/Trimslice linux box with expressjs 2.5.2 and node 6.6

edited Mar 19, 2012 at 1:42

answered Mar 18, 2012 at 22:20

Joel

3273 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Over a year ago

Works for express 3 and node 10 too

Chris Sainty · Accepted Answer · 2012-01-18 07:13:43Z

2

Edit: '@import "/public/stylesheets/two";'

Original proposal did not work.

edited Jan 18, 2012 at 7:13

answered Jan 17, 2012 at 22:10

Chris Sainty

9,3461 gold badge29 silver badges31 bronze badges

4 Comments

rovaughn Over a year ago

If I use .css, it won't statically import the Less file (i.e. in the compiled CSS, there's a line @import "another.css";. I want to combine the Less files at compile time. Thanks for the idea, though!

Chris Sainty Over a year ago

Right. Try this one then @import "/public/stylesheets/two";

rovaughn Over a year ago

It worked! Thanks! Unfortunately, it will only re-compile if I update one.less. If I only update another.less, it won't change. Do you know any fix for this?

Chris Sainty Over a year ago

Not sure about that one, it would require digging into the less compiler probably. Finding out how it currently manages cancelling the cache and extending it.

Collectives™ on Stack Overflow

Node js - Less css cannot find file to import

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related