11

如何编译包含在 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

4

4 回答 4

11

要使用 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 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）

于 2013-04-30T17:43:38.673 回答
4

如何使用 Web Essentials 2012 将 .less 编译为 .css

要使用 VS 2012 + Web Essentials 2012 编译 .less 文件，您的 .less 文件必须没有错误。每个需要导入或混合的 .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 文件都无法编译，因为它们没有定义变量和 mixin。（因为 mixins.less 和 variables.less 文件已被导入到各个文件中）并且由于它们无法编译，因此 .less -> .css 编译过程会静默失败。

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

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

于 2013-04-30T04:33:24.020 回答
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 文件，我只是做了一个表面的更改并保存了它。

于 2013-08-20T19:16:10.097 回答
1

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

  1. 确保正确安装了 Web Essentials。
  2. 在TOOLS / Options / Web Essentials / LESS下，确保Auto-compiledependent files on save为True，Compile files on save为True。
  3. 如果您的 Web 应用程序项目当前正在使用预编译的 NuGet 包Bootstrap，或者如果您手动将Bootstrap添加到您的项目中，请将其删除。
  4. 使用 NuGet，将Bootstrap Less Source包添加到您的 Web 应用程序项目中。
  5. 将新的bootstrap.less文件添加到应用程序的~/Content文件夹 (MVC)。
  6. 删除此文件的全部内容，然后单击~/Contents/bootstrap/bootstrap.less文件并将其拖到此文件中。这将创建一个@import "bootstrap/bootstrap"；在您的新文件中输入。
  7. 要将这个文件编译成 CSS 文件，您需要做的就是保存文件（即按 CTRL-S 或保存文件按钮）。
  8. 如果您对文件进行任何更改，您需要做的就是重新保存此文件。

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

请享用！

于 2014-12-15T19:06:51.740 回答