如何使用 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"));

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

How to include LESS files in web page using Web Essentials?

css

asp.net-mvc

visual-studio

less

web-essentials