Compile LESS via node.js and the MEAN stack?

1
votes

I'm just starting my first MEAN stack project and since Bootstrap included works on LESS (even though I would very much prefer Foundation 5 and SASS instead...) I am trying to figure out a way to actually get it displayed in browser.

I mean it doesn't seem to need compiling, since the source code inspect shows the source as xxx.less instead of xxx.css.

However, no changes in the filed are reflected in the browser. How do I do this automatically?

All the advice I've been given so far was to get less.js and use lessc in the CLI to compile to .css however, like I said, inspecting any element from a new, unaltered MEAN stack base shows the source as xxx.less (inspecting the navbar color for exemple shows the source as navbar.less) so why would I compile to .css?

2
cssangularjsnode.jstwitter-bootstrapless
I'm running into the exact same issue. I don't think the answerer's are aware. They may have a different version of the Stack. I've noticed, like you, that the browser is interpreting the less file, which I've changed and cleared cache with no luck. I've run the gulp less and gulp build tasks that were pre-configured with the project. Something is probably buggy with this release. Did you ever solve it? I suspect the Gulp configuration needs to be refactored and built so it's less abstract. – Dave Alperovich

2 Answers

0
votes

Use the Less task for gulp or grunt. Either of these tools can setup watchers to transpile your Less for development.

https://github.com/gruntjs/grunt-contrib-less

https://github.com/plus3network/gulp-less

0
votes

Since, the other answer still makes you use the CLI to compile less to CSS (and I am assuming you are not using grunt).

Try the lessMiddleware, that way node will convert less to css automatically and wouldn't require you to manually compile every time you make a change with a CLI. It's also very easy to use:

`

var lessMiddleware = require('less-middleware');

var app = express();
app.use(lessMiddleware(__dirname + '/public'));
app.use(express.static(__dirname + '/public'));`

More info at: https://www.npmjs.com/package/less-middleware