Stylesheet Loading With Express / Less

I was trying to figure out how to get express and less to create multiple stylesheets. When you start an express(1) app, it loads in less like this:

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

But I need two things as my app grows:

  1. Move my source less files to a different path.
  2. Add more files that are compiled from less to css.

I was able to find documentation for how to do (1) on the less-middleware readme. So I was able to move my less files and my app.js now has this statement:

app.js
1
2
3
4
5
app.use(less({ 
  src: __dirname + '/less',
  dest: __dirname + '/public/css',
  prefix: '/css'
}));

This allows me to put my less in the root directory and it will be built to my public directory. The documentation explains the purpose of the prefix parameter, but I'm not sure I fully understand its use. At anyrate, the above snippet does the job.

Part Deux

Up to now I‘ve only needed style.css/less. I’m importing several supporting less files and they all build into style.css just fine. But I'm working on getting the design geared to mobile first. I needed to be able to have pages point to multiple css files, for example, style.css and enhanced.css.

I‘m sure there’s documentation about there somewhere, but I haven‘t been able to find it. So I wasn’t really sure how to make an enhanced.less build to an enhanced.css. At first I figured less was configured to automatically look for a style.less in the source directory. I added this line and nothing happened:

app.js
1
2
3
4
5
6
//RESPONSIVE enhanced.less -> enhanced.css
app.use(less({
  src: __dirname + '/less/enhanced',
  dest: __dirname + 'public/css/enhanced',
  prefix: '/css'
}));

I ran the app but no enhanced.css showed up. Up to this point I somehow thought that I was linking to the enhanced.css I was trying to get less to build. After removing the app.use call that wasn't working and adding the stylesheet to the page correctly, voila, it worked! The host was returning enhanced.css and I could see it on the computer.

What's The Deal?

I can‘t really find anything specific, but it looks like that less or the less middleware compiles as needed on the request. So all I needed was the link on the page to enhanced.css and it’s matching less counterpart in the src path. Duhhh.