如何使用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开发人员工具和Web Essentials 2012

Answer 1

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

将bootstrap-3.0.0-wip文件夹添加到Visual Studio Web项目.(我的项目碰巧是一个ASP.Net MVC 4空项目,但它没关系.)

将bootstrap.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语句),但是因为编译了重要的文件而无关紧要.

如果在ASP.MVC 4项目中集成Bootstrap3.0.0-wip源代码,您可以利用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中检索的)

Answer 2

如何使用Web Essentials 2012编译成.css

要使用VS 2012 + Web Essentials 2012编译.less文件,您的.less文件必须没有错误.每个需要导入或mixin的.less文件都必须指定它.突出显示.less文件并在预览窗格中预览输出.如果指定了错误,则编译为.css将不起作用.

它还有助于设置Web Essentials选项以在构建时编译.less文件.

Tools > Options > Web Essentials > LESS > Compile On Build = TRUE

您也可以通过设置以下内容将其设置为编译为"css"文件夹.

Tools > Options > Web Essentials > LESS > Compile to 'css' folder = TRUE

此设置在LESS目录中创建一个CSS文件夹,在该文件夹中为构建过程中编译的每个.less文件放置一个[filename] .css和[filename] .min.css文件.

至于为什么Bootstrap-3.0.0-wip .less文件夹无法使用Web Essentials 2012进行编译(+ VS 2012)

a)如果构建.less文件有任何错误,它将不会编译为.css文件.

b)Web Essentials 2012(+ VS 2012)似乎尚未识别文件夹中的多个.less文件,这些文件全部由单个入口点文件导入,例如Bootstrap 3.0-wip中的bootstrap.less文件(除非每个文件)列出其所需的导入).这很可能是因为还没有办法指定入口点文件.因此,大多数Bootstrap .less文件都无法编译,因为它们没有定义变量和mixins.(因为mixins.less和variables.less文件都已导入到单个文件中)并且由于它们无法编译,因此.less - > .css编译过程无声地失败.

c)编译依赖于彼此的.less文件的文件夹的方法(从Web Essentials 2.7开始,将所有文件按照bootstrap.less中列出的顺序连接成一个大的.less文件.

d)由于步骤c是一个耗时的痛苦,我建议现在使用外部编译器编译bootstrap的较少文件.至少在Web Essentials允许您设置入口点并按所需顺序编译从属.less文件的文件夹之前.

Answer 3

根据Web Essentials 的变更日志，我想说这个问题已于 2013 年 7 月 31 日修复（“修复了 LESS 相对 @import 问题”）。我刚刚在 MVC 4 项目中使用 Visual Studio 2012（更新 3）以及最新的 Web Essentials 2012 和 Bootstrap 3.0 进行了尝试，它似乎工作正常（具体来说，它从 bootstrap.less 生成 bootstrap.css）。

对于任何想要做同样事情的人，我在安装 Web Essentials 后所做的就是将 .less 文件添加到我的 Css 文件夹，将 boostrap.js 文件添加到我的 Scripts 文件夹，将字体文件添加到我的 Fonts 文件夹（Bootstrap 现在使用字体而不是精灵图像），并在我的主视图中包含编译后的 bootstrap.css 和 bootstrap.js 文件。请注意，我还右键单击了 .less 文件之一以生成解决方案设置（Web Essentials 使用的一些配置文件）。为了第一次生成 .css 文件，我只是做了一些表面的更改并保存了它。