CODEWITHSUNDEEP
node.jsexpress
Rafael
Rafael

Reputation: 7746

Express less-middleware not compiling

Can someone please help me get my css compiling. I don't know why my view is not getting the compiled less

Index.js

// MIDDLEWARE
var express = require('express');
var less = require('less-middleware');
var app = express();

// LESS COMPILER
app.use(less('source/less', {
  "dest": 'public/stylesheets',
  "pathRoot": __dirname,
  "force": true,
  "render": {
    "yuicompress": true
  }
}));

// APP CONFIG
app.use(express.static(__dirname + '/public'));
app.set('views', 'views')
app.set('view engine', 'jade');

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

// PAGE NOT FOUND
app.use(function(req, res, next) {
  res.status(404).send('Sorry cant find that!');
});

// WEB SERVER
var server = app.listen(3000, function () {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://%s:%s', host, port);
});

Index.jade

html
  head
    title Hello
    link(src="stylesheets/global.css" type="text/css")
  body
    h1 Welcome

Upvotes: 0

Views: 791

Answers (1)

Trott
Trott

Reputation: 70183

You can read about how to set the src and dest dirs for your less-middleware to different directories at https://github.com/emberfeather/less.js-middleware/wiki/Examples. But the upshot is this: To keep things relatively straightforward, the relative path of your source and dest must be identical.

I would recommend moving your less source files out of public to make this easier and because they're not supposed to be served as-is anyway.

Create a less-src dir in the same directory that has your public directory. Inside less-src, create a stylesheets directory and put your global.less in there. Then change your less middleware use to this:

app.use(lessMiddleware(__dirname + '/less-src', 
    {dest: __dirname + '/public'}));

And that will work.

If you dislike having a stylesheets directory in less-src, then you need to look at the material about preprocessing the less path at the the link above. To me, that trades code complexity for very little gain in terms of source code layout. But if it seems worth it to you, then that's how you can do it.

Upvotes: 2

Related Questions