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-3.0.0-wip folder添加到Visual Studio Web项目。（我的项目恰好是一个ASP.Net MVC 4 Empty项目，但它没关系。）

将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 - ＆gt; .css编译过程无声地失败。

c）编译相互依赖的.less文件的文件夹的方法（从Web Essentials 2.7开始，将所有文件按照bootstrap.less中列出的顺序连接成一个大的.less文件。

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

Answer 3

根据Web Essentials的changelog，我会说这是在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文件，我只做了一个表面的改动并保存了它。

Answer 4

现在这变得更加容易，并且需要很少的动作。首先，我使用的是VS 2013，但VS 2012的步骤应该相同：

确保已正确安装Web Essentials。
在 TOOLS / Options / Web Essentials / LESS 下，确保保存时自动编译相关文件为 True ，保存时编译文件 True 。
如果您的Web应用程序项目当前正在使用预编译的NuGet包 Bootstrap ，或者您手动将 Bootstrap 添加到项目中，请将其删除。
使用NuGet，将 Bootstrap Less Source 包添加到Web应用程序项目中。
将新的 bootstrap.less 文件添加到应用程序的〜/ Content 文件夹（MVC）中。
删除此文件的全部内容，然后单击并将〜/ Contents / bootstrap / bootstrap.less 文件拖放到此文件中。这将在您的新文件中创建 @import＆＃34; bootstrap / bootstrap＆＃34 ;; 条目。
要将此文件编译为CSS文件，您只需保存文件（即按CTRL-S或“保存文件”按钮）。
如果您对文件进行任何更改，您只需重新保存此文件。

这样做可以让您在新版本可用时轻松更新NuGet包。您可以在 @import 行之后添加任何不太变量的更改。

享受！

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

4 个答案: