如何使用 Web Essentials 在网页中包含 LESS 文件？答案

【问题标题】：How to include LESS files in web page using Web Essentials?如何使用 Web Essentials 在网页中包含 LESS 文件？
【发布时间】：2015-08-30 08:12:42
【问题描述】：

我已经安装了 web essentials 2013 并且我创建了一个默认的 MVC 项目用于测试目的来尝试 LESS 功能。

我删除了所有引导 CSS 文件，并在 Content 中放置了一个名为 less 的文件夹，其中包含所有 bootstrap 的 .less 文件，但是当我右键单击它们时，web essentials 菜单全部变灰出来，它不会编译任何东西...... 如何使用Web Essentials 自动编译在网页中包含更少的文件。这可能吗？

web Essentials的设置如下：

"Less": {
    "CompileOnBuild": true,
    "CompileOnSave": false,
    "EnableChainCompilation": true,
    "GenerateSourceMaps": true,
    "MinifyInPlace": false,
    "OutputDirectory": "css",
    "ProcessSourceMapsForEditorEnhancements": true,
    "ShowPreviewPane": true,
    "StrictMath": false
}

【问题讨论】：

我使用网络必需品，但不打扰编译。我只是添加了less.js 文件（用于在浏览器中编译）并引用styles.less（或任何你的名字）。这样，任何使用不使用 Web Essentials 的项目（团队中的其他成员）的人都将始终拥有编译文件
@RobScott 嗯...in/for production?
正是我所说的。仅用于生产您要做的是将LESS文件（我使用WinLESS）编译成CSS（或者我猜是使用Web Essentials），注释掉JS文件和LESS文件的引用，并取消注释主CSS文件（或 min.css）。我确信有更简单的方法可以做到这一点，这正是我和我的团队所做的，因为他们不使用网络必需品

标签： css asp.net-mvc visual-studio less web-essentials

【解决方案1】：

只需将您的 Web Essentials 配置为在保存和构建时进行编译。这样，您始终可以通过保存 LESS 文件手动生成 CSS。

或者，您可以配置 Web Essentials 以缩小生成的 CSS：

另外添加一个 StyleBundle 来加载生成的缩小 CSS 文件：

bundles.Add(new StyleBundle("~/bundles/css").Include("~/Content/bootstrap.min.css"));

【讨论】：

对我来说，Web Essentials 也只是在您更改 LESS 时更新 CSS 的后台工作。