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.
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?
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.
