Configure Webpack to build a directory of LESS fil

Question

I'm hoping to use Webpack compile all our less files in /less to /public/css and include them in our server-side templates as regular css (not sticking the text into the using ExtractText plugin or overloading require).

That is, I'm trying to get Webpack + a LESS loader or plugin to glob to compile all the .less files:

/less/foo.less /less/bar.less /less/unknown-new-less-file.less ...

and output them to

/public/css/foo.less /public/css/bar.less /less/unkown-new-less-file.less

I then want to include them in our app by pulling in css file using <link rel="stylesheet" href="foo.css">

I tried using a Bash script and lessc instead of Webpack, which worked fine, but won't enable us to automatically re-compile the LESS when the source files change.

Answer 1

Instead of webpack, you can use chokidar with lessc. First, install chokidar: npm install chokidar-cli

Then, use it to watch your less files: chokidar "less/*.less" -c "lessc less/foo.less public/css/foo.css"

Chokidar documentation on GitHub

More information about why not to use webpack for compiling less separately: Can I use webpack to generate CSS and JS separately?

Answer 2

The problem was that I was using Webpack as a task runner, which it is not.

I was resisting adding Gulp or Make. Gulp because it turns into a giant unmaintainable mess and Make even though it's great because it's a little hard for teams to learn.

I ended up using something like fswatch in an npm script to re-run lessc.

The Less docs recommend using grunt, Gulp, or dev-mode in-browser parsing: http://lesscss.org/usage/#using-less-in-the-browser-watch-mode.