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

Question

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

我删除了所有 bootstrap 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
}

Answer 1

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

可选地，您可以配置 Web Essentials 以缩小生成的 CSS:

同时添加一个 StyleBundle 来加载生成的缩小的 CSS 文件:

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