配置 Webpack 将 LESS 文件的目录构建成对应的 CSS 文件答案

【问题标题】：Configure Webpack to build a directory of LESS files into corresponding CSS files配置 Webpack 将 LESS 文件的目录构建成对应的 CSS 文件
【发布时间】：2016-12-01 14:08:15
【问题描述】：

我希望使用 Webpack 将 /less 中的所有 less 文件编译为 /public/css 并将它们作为常规 css 包含在我们的服务器端模板中（不将文本粘贴到 using ExtractText 插件或重载需要）。

也就是说，我正在尝试让 Webpack + 一个 LESS 加载器或插件来 glob 编译所有 .less 文件：

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

并将它们输出到

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

然后我想通过使用拉入 css 文件将它们包含在我们的应用程序中 <link rel="stylesheet" href="foo.css">

我尝试使用 Bash 脚本和 lessc 代替 Webpack，效果很好，但无法在源文件更改时自动重新编译 LESS。

【问题讨论】：

标签： plugins less webpack watch

【解决方案1】：

您可以使用chokidar 和lessc 来代替webpack。一、安装chokidar：npm install chokidar-cli

然后，用它来查看你的 less 文件： chokidar "less/*.less" -c "lessc less/foo.less public/css/foo.css"

Chokidar documentation on GitHub

更多关于为什么不使用 webpack 单独编译 less 的信息：Can I use webpack to generate CSS and JS separately?

【讨论】：

【解决方案2】：

问题是我使用 Webpack 作为任务运行器，但事实并非如此。

我拒绝添加 Gulp 或 Make。 Gulp 因为它变成了一个无法维护的巨大混乱，而 Make 尽管它很棒，因为它对团队来说有点难以学习。

我最终在 npm 脚本中使用了 fswatch 之类的东西来重新运行 lessc。

Less 文档建议使用 grunt、Gulp 或 dev-mode 浏览器内解析：http://lesscss.org/usage/#using-less-in-the-browser-watch-mode。

【讨论】：

查看此评论：stackoverflow.com/a/44859700/4319253。告诉我是否需要添加更多信息。
@S.Klechkovski 拥有一个可以导入所有其他文件的 LESS 文件是一个有趣的解决方案，谢谢。