0

I was using the default lessMiddleware setup whereby the compiled .css files are stored in the same folder as their source .less files.

I then switched to using separate folders for my css and less files an d since then the my .less files are not being compiled into .css anymore (basically the paths are all wrong now - check out the debug log at the bottom). What am I doing wrong ?

folder structure :

  • .....
  • public
    • styles
      • css
      • less
  • .....
  • app.js

app.js :

app.use(lessMiddleware(__dirname + '/public/styles/less', {
    force: true,
    dest: __dirname + '/public/styles/css',
    debug: true
}));

app.use(express.static(__dirname + "/public"));

app.get('/', function(req, res, next) 
{
    res.render('index.ejs');
});

index.ejs :

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="/styles/css/animations.css"/>
        <link rel="stylesheet" type="text/css" href="/styles/css/global.css"/>
        ........
        ............

Less Debug log :

  pathname : /styles/css/animations.css
  source : /Users/mothership/testapp/public/styles/less/styles/css/animations.less
  destination : /Users/mothership/testapp/public/styles/css/styles/css/animations.css
  pathname : /styles/css/global.css
  source : /Users/mothership/testapp/public/styles/less/styles/css/global.less
  destination : /Users/mothership/testapp/public/styles/css/styles/css/global.css

1 Answer 1

0

Turns out the solution is the following (maybe there's a cleaner one but I couldn't find it) :

app.use(lessMiddleware(__dirname + '/public/styles/less', {
    force: true,
    dest: __dirname + '/public',
    debug: true,
    preprocess: {
        path: function(pathname, req) {
          return pathname.replace(/styles\/css\//, '');
        }
      }
}));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.