如何使用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上格式化的bootstrapless文件夹。

将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语句），但是，由于您已编译了重要文件，因此这无关紧要。

---

如果将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中检索的）

Answer 2

如何使用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文件无法编译，因为它们没有定义其变量和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文件，我做了一个表面的更改并将其保存。

Answer 4

现在，这变得容易得多，并且几乎不需要采取任何措施。 首先，我使用的是VS 2013，但步骤与VS 2012相同：

1. 确保正确安装了Web Essentials。
2. 在TOOLS / Options / Web Essentials / LESS下 ，确保保存时自动编译依赖文件为True ， 保存时编译文件为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行之后添加任何较少的变量更改。

请享用！