配置Webpack以将LESS文件的目录构建到相应的CSS文件中 [英] Configure Webpack to build a directory of LESS files into corresponding CSS files

问题描述

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

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

也就是说，我正在尝试使Webpack +一个LESS加载器或插件进行glob编译，以编译所有.less文件:

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

/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

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

然后我想通过使用以下命令将css文件拉入我们的应用程序中 <link rel="stylesheet" href="foo.css">

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

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

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.

推荐答案

问题是我将Webpack用作任务运行程序，而事实并非如此.

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

我拒绝添加Gulp或Make. Gulp因为它变成了一个巨大的无法维护的烂摊子，尽管它很棒，因为团队学习起来有些困难.

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.

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

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

Less文档建议使用grunt，Gulp或dev-mode浏览器内解析:

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

这篇关于配置Webpack以将LESS文件的目录构建到相应的CSS文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！