visual-studio - 如何使用 Visual Studio 和 Web Essentials 2012 将 Bootstrap-3.0.0-wip less 文件夹编译为 .css？

Question

如何编译包含在 Visual Studio 2012 MVC Web 项目中的 .less 文件文件夹(例如 Bootstrap-3.0.0-wip)？

我可以使用外部工具将 .less 编译为 .css，但不清楚如何将 .less 文件编译为 .css，作为使用最新 Visual Studio 构建的一部分。 (尽管当前 VS 插件提供了 .less 兼容性*)我可以在预览窗口中看到 .less 文件的编译输出，但我无法弄清楚如何在运行项目时保存输出或自动编译它。

*VS 2012.2 更新、Microsoft Web Developer Tools 和 Web Essentials 2012

Answer 1

要使用 Visual Studio 2012 + Web Essentials 2012 编译 Bootstrap .less 文件的文件夹，您必须稍作调整，因为 Web Essentials 无法编译 github 上格式化的 bootstrap less 文件夹。

添加 bootstrap-3.0.0-wip folder到 Visual Studio Web 项目。 (我的项目恰好是一个 ASP.Net MVC 4 Empty 项目，但应该没关系。)

将 bootstrap.less 文件(所有项目 less 文件的入口点)上移一个文件夹，将所有其他文件留在\less 文件夹中。

它应该如下所示:

bootstrap.less
less\[all other less files].less 

接下来，编辑 bootstrap.less 文件，将“less\”文件夹前缀添加到所有 @import 语句，如下所示:

// Core variables and mixins
@import "less\variables.less";
@import "less\mixins.less";

// ...etc until all of the import statements include less\ at the start

现在，保存项目。除非仍然有编译错误，否则移动的 bootstrap.less 文件应该已经编译成 bootstrap.css 和 bootstrap.min.css 文件。 (详见错误列表)

剩余的 .less 文件将无法编译，因为它们仍然存在错误(单个文件上没有 @import 语句)，但是这并不重要，因为您已经编译了重要的文件。

如果将 Bootstrap3.0.0-wip 源代码集成到 ASP.MVC 4 项目中，则可以利用 MVC 4 的捆绑来编译 JS 文件。

假设您将 Bootstrap 源代码放入项目/Content/bootstrap 的文件夹中，请将以下内容添加到您的 App_Start\BundleConfig.cs 文件中:

// Bootstrap 3 script bundle
bundles.Add(new ScriptBundle("~/bundle/scripts/bootstrap_js").Include(
            "~/Content/bootstrap/js/bootstrap-transition.js",
            "~/Content/bootstrap/js/bootstrap-alert.js",
            "~/Content/bootstrap/js/bootstrap-button.js",
            "~/Content/bootstrap/js/bootstrap-carousel.js",
            "~/Content/bootstrap/js/bootstrap-collapse.js",
            "~/Content/bootstrap/js/bootstrap-dropdown.js",
            "~/Content/bootstrap/js/bootstrap-modal.js",
            "~/Content/bootstrap/js/bootstrap-tooltip.js",
            "~/Content/bootstrap/js/bootstrap-popover.js",
            "~/Content/bootstrap/js/bootstrap-scrollspy.js",
            "~/Content/bootstrap/js/bootstrap-tab.js",
            "~/Content/bootstrap/js/bootstrap-typeahead.js",
            "~/Content/bootstrap/js/bootstrap-affix.js"));

(注:这些js文件的顺序取自项目自带的Makefile)