配置Webpack以将LESS文件的目录构建到相应的CSS文件中

时间:2016-07-27 13:57:52

标签: plugins less webpack watch

我希望使用Webpack将/less中所有较少的文件编译为/public/css,并将它们作为常规css包含在我们的服务器端模板中(坚持文本进入使用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。

2 个答案:

答案 0 :(得分:0)

您可以将chokidarlessc一起使用,而不是使用webpack。 首先,安装chokidar:npm install chokidar-cli

然后,用它来观察你的文件: chokidar "less/*.less" -c "lessc less/foo.less public/css/foo.css"

Chokidar documentation on GitHub

有关为何不使用webpack进行单独编译的更多信息:Can I use webpack to generate CSS and JS separately?

答案 1 :(得分:0)

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

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

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

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