问题
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.
回答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?
回答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.
来源：https://stackoverflow.com/questions/38615076/configure-webpack-to-build-a-directory-of-less-files-into-corresponding-css-file