通过 node.js 和 MEAN 堆栈编译 LESS？答案

【问题标题】：Compile LESS via node.js and the MEAN stack?通过 node.js 和 MEAN 堆栈编译 LESS？
【发布时间】：2014-12-19 06:37:24
【问题描述】：

我刚刚开始我的第一个 MEAN 堆栈项目，因为 Bootstrap 包含了 LESS 上的作品（尽管我更喜欢 Foundation 5 和 SASS...）我正在尝试找出一种方法来实际显示它在浏览器中。

我的意思是它似乎不需要编译，因为源代码检查显示源为 xxx.less 而不是 xxx.css。

但是，字段中的更改不会反映在浏览器中。如何自动执行此操作？

到目前为止，我得到的所有建议都是获取 less.js 并在 CLI 中使用 lessc 编译为 .css 但是，就像我说的，检查来自新的、未更改的 MEAN 堆栈库的任何元素会显示源代码作为 xxx.less（例如，检查导航栏颜色将源显示为 navbar.less）那么我为什么要编译为 .css？

【问题讨论】：

我遇到了完全相同的问题。我不认为回答者知道。他们可能有不同版本的堆栈。我和你一样注意到浏览器正在解释 less 文件，我已经更改并清除了缓存但没有运气。我已经运行了项目预配置的gulp less 和gulp build 任务。这个版本可能有问题。你有没有解决过？我怀疑 Gulp 配置需要重构和构建，所以它不那么抽象。

标签： css angularjs node.js twitter-bootstrap less

【解决方案1】：

将 Less 任务用于 gulp 或 grunt。这些工具中的任何一个都可以设置观察者来转换您的 Less 用于开发。

https://github.com/gruntjs/grunt-contrib-less

https://github.com/plus3network/gulp-less

【讨论】：

我遇到了和 OP 一样的问题。我尝试了gulp less 和gulp build CLI，但没有成功。这个问题令人困惑，因为我不知道浏览器解释的文件更少，但 chrome 工具告诉我更少的文件是样式的来源。我认为这是骗人的。无论哪种方式，观察者和手动过程都会失败。

【解决方案2】：

因为，另一个答案仍然让你使用 CLI 来编译 CSS（我假设你没有使用 grunt）。

尝试使用lessMiddleware，这样node 会自动将less 转换为css，并且每次使用CLI 进行更改时都不需要您手动编译。它也很容易使用：

var lessMiddleware = require('less-middleware');

var app = express();
app.use(lessMiddleware(__dirname + '/public'));
app.use(express.static(__dirname + '/public'));`

更多信息请访问：https://www.npmjs.com/package/less-middleware

【讨论】：

我遇到了与 OP 相同的问题。我尝试了gulp less 和gulp build CLI，但没有成功。这个问题令人困惑，因为我不知道浏览器解释的文件更少，但 chrome 工具告诉我更少的文件是样式的来源。我认为这是骗人的。无论哪种方式，观察者和手动过程都会失败。