twitter-bootstrap 如何使用 Visual Studio 和 Web Essentials 2012 将 Bootstrap-3.0.0-wip less 文件夹编译为 .css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16175295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I compile the Bootstrap-3.0.0-wip less folder to .css with Visual Studio and Web Essentials 2012?
提问by Dan Sorensen
How do I compile a folder of .less files (such as Bootstrap-3.0.0-wip) included into a Visual Studio 2012 MVC web project?
如何编译包含在 Visual Studio 2012 MVC Web 项目中的 .less 文件文件夹（例如 Bootstrap-3.0.0-wip）？
I can compile .less to .css with external tools, but it is not clear how to compile .less files to .css as part of a build with the latest Visual Studio. (despite the .less compatibility provided by current VS plugins*) I can see the compiled output of .less files in a preview window, but I cannot figure out how to save the output or compile it automatically when I run the project.
我可以使用外部工具将 .less 编译为 .css，但不清楚如何将 .less 文件编译为 .css 作为使用最新 Visual Studio 构建的一部分。（尽管当前 VS 插件提供了 .less 兼容性*）我可以在预览窗口中看到 .less 文件的编译输出，但我无法弄清楚如何在运行项目时保存输出或自动编译它。
*VS 2012.2 update, Microsoft Web Developer Tools, and Web Essentials 2012
*VS 2012.2 更新、Microsoft Web 开发人员工具和 Web Essentials 2012
采纳答案by Nicholas Westby
Based on the changelogfor Web Essentials, I'd say this was fixed on July 31st, 2013 ("Fixed LESS relative @import issue"). I just tried this with Visual Studio 2012 (Update 3) and the latest Web Essentials 2012 and Bootstrap 3.0 in an MVC 4 project, and it seemed to work fine (specifically, it was generating bootstrap.css from bootstrap.less).
根据Web Essentials的变更日志，我认为这已于 2013 年 7 月 31 日修复（“已修复 LESS 相对 @import 问题”）。我刚刚在一个 MVC 4 项目中使用 Visual Studio 2012（更新 3）和最新的 Web Essentials 2012 和 Bootstrap 3.0 尝试了这个，它似乎工作正常（特别是它从 bootstrap.less 生成 bootstrap.css）。
For anybody who wants to do the same, all I did after installing Web Essentials was add the .less files to my Css folder, add the boostrap.js file to my Scripts folder, add the font files to my Fonts folder (Bootstrap now uses fonts instead of a sprite image), and included the compiled bootstrap.css and the bootstrap.js files in my main view. Note that I also right clicked one of the .less files to generate the solution settings (some config file used by Web Essentials). And to get the .css file generated the first time, I just made a superficial change and saved it.
对于任何想做同样事情的人，我在安装 Web Essentials 后所做的就是将 .less 文件添加到我的 Css 文件夹中，将 boostrap.js 文件添加到我的 Scripts 文件夹中，将字体文件添加到我的 Fonts 文件夹中（Bootstrap 现在使用字体而不是精灵图像），并在我的主视图中包含编译的 bootstrap.css 和 bootstrap.js 文件。请注意，我还右键单击了 .less 文件之一以生成解决方案设置（Web Essentials 使用的某些配置文件）。而为了得到第一次生成的 .css 文件，我只是做了一个表面的改变并保存了它。
回答by Dan Sorensen
To compile a folder of Bootstrap .less files with Visual Studio 2012 + Web Essentials 2012, you must make a slight adjustment as Web Essentials cannot compile the bootstrap less folder as formatted on github.
要使用 Visual Studio 2012 + Web Essentials 2012 编译 Bootstrap .less 文件的文件夹，您必须稍作调整，因为 Web Essentials 无法按照 github 上的格式编译 bootstrap less 文件夹。
Add the bootstrap-3.0.0-wip folderto a Visual Studio web project. (my project happened to be an ASP.Net MVC 4 Empty project, but it shouldn't matter.)
将bootstrap-3.0.0-wip 文件夹添加到 Visual Studio Web 项目。（我的项目碰巧是一个 ASP.Net MVC 4 Empty 项目，但应该没有关系。）
Move the bootstrap.less file (the entry point for all of the project less files) up one folder, leaving all of the other files in the \less folder.
将 bootstrap.less 文件（所有项目 less 文件的入口点）向上移动一个文件夹，将所有其他文件留在 \less 文件夹中。
It should look like this:
它应该是这样的：
bootstrap.less
less\[all other less files].less
Next, edit the bootstrap.less file adding the "less\" folder prefix to all of the @import statements as follows:
接下来，编辑 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
Now, save the project. The moved bootstrap.less file should have been compiled into a bootstrap.css and a bootstrap.min.css file unless you still have a compile error. (see error list for details)
现在，保存项目。移动的 bootstrap.less 文件应该已经编译成 bootstrap.css 和 bootstrap.min.css 文件，除非你仍然有编译错误。（详见错误列表）
The remaining .less files will not compile because they still have errors (no @import statements on the individual files), but it won't matter as you have compiled the important one.
其余的 .less 文件将无法编译，因为它们仍然有错误（单个文件上没有 @import 语句），但没关系，因为您已经编译了重要的文件。
If you integrate Bootstrap3.0.0-wip source code within an ASP.MVC 4 project you can take advantage of MVC 4's bundling to also compile the JS files.
如果您在 ASP.MVC 4 项目中集成 Bootstrap3.0.0-wip 源代码，您可以利用 MVC 4 的捆绑来编译 JS 文件。
Assuming you drop the Bootstrap source code into a folder in your project /Content/bootstrap, add teh following to your App_Start\BundleConfig.cs file:
假设您将 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"));
(Note: The order of these js files was retrieved from the Makefile included with the project)
（注意：这些js文件的顺序是从项目附带的Makefile中检索到的）
回答by Dan Sorensen
How to get .less to compile to .css with Web Essentials 2012
如何使用 Web Essentials 2012 将 .less 编译为 .css
To compile a .less file with VS 2012 + Web Essentials 2012, your .less files must be error free. Each .less file that requires an import or mixin must specify it. Highlight your .less file and preview the output in the preview pane. If there is an error specified, your compile to .css will not work.
要使用 VS 2012 + Web Essentials 2012 编译 .less 文件，您的 .less 文件必须没有错误。每个需要导入或混合的 .less 文件都必须指定它。突出显示您的 .less 文件并在预览窗格中预览输出。如果指定了错误，则编译为 .css 将不起作用。
It also helps to setup the Web Essentials options to compile the .less file upon build.
它还有助于设置 Web Essentials 选项以在构建时编译 .less 文件。
Tools > Options > Web Essentials > LESS > Compile On Build = TRUE
You may also set it to compile to a 'css' folder by setting the following.
您还可以通过设置以下内容将其设置为编译到“css”文件夹。
Tools > Options > Web Essentials > LESS > Compile to 'css' folder = TRUE
This setting creates a CSS folder within the LESS directory where it places a [filename].css and [filename].min.css file for each .less file it compiled during the build process.
此设置在 LESS 目录中创建一个 CSS 文件夹，它为在构建过程中编译的每个 .less 文件放置一个 [filename].css 和 [filename].min.css 文件。
As to why Bootstrap-3.0.0-wip .less folder won't compile with Web Essentials 2012 (+ VS 2012)
至于为什么 Bootstrap-3.0.0-wip .less 文件夹不能用 Web Essentials 2012 (+ VS 2012) 编译
a) It will not compile to .css files if there are any errors building the .less files.
a) 如果在构建 .less 文件时出现任何错误，它将不会编译为 .css 文件。
b) Web Essentials 2012 (+VS 2012) does not yet appear to recognize multiple .less files in a folder that are all imported by a single entry point file, such as the bootstrap.less file in Bootstrap 3.0-wip (unless each file lists its required imports). This is likely because there is no way to specify the entry point file yet. Because of this, most of the Bootstrap .less files fail to compile since they do not have their variables and mixins defined. (since the mixins.less nor the variables.less file have been imported to the individual files) And since they fail to compile, the .less -> .css compile process silently fails.
b) Web Essentials 2012 (+VS 2012) 似乎还不能识别文件夹中所有由单个入口点文件导入的多个 .less 文件，例如 Bootstrap 3.0-wip 中的 bootstrap.less 文件（除非每个文件列出其所需的进口）。这可能是因为还没有办法指定入口点文件。因此，大多数 Bootstrap .less 文件无法编译，因为它们没有定义变量和 mixin。（因为 mixins.less 和 variables.less 文件都已导入到各个文件中）并且由于它们无法编译，所以 .less -> .css 编译过程会默默地失败。
c) The way to compile a folder of .less files that depend on each other (as of Web Essentials 2.7 is to concat all the files together into one big .less file in the order that they are listed in bootstrap.less.
c) 编译一个包含相互依赖的 .less 文件的文件夹的方法（从 Web Essentials 2.7 开始，是将所有文件按照它们在 bootstrap.less 中列出的顺序合并成一个大的 .less 文件。
d) Since step c is a time consuming pain, I recommend compiling bootstrap's less files with an external compiler for now. At least until Web Essentials allows you to set an entry point and compile a folder of dependent .less files in the required order.
d) 由于步骤 c 是一个耗时的痛苦，我建议现在使用外部编译器编译引导程序的 less 文件。至少在 Web Essentials 允许您设置入口点并按所需顺序编译依赖 .less 文件的文件夹之前。
回答by William Bosacker
This has become much easier now, and requires very little action. First off, I'm using VS 2013, but the steps should be the same for VS 2012:
现在这变得容易多了，而且只需要很少的操作。首先，我使用的是 VS 2013，但 VS 2012 的步骤应该相同：
- Ensure that Web Essentials is properly installed.
- Under TOOLS / Options / Web Essentials / LESS, ensure that Auto-compile dependent files on saveis True, and Compile files on saveis True.
- If your Web Application project is currently using the pre-compiled NuGet package Bootstrap, or if you manually added Bootstrapto your project, remove it.
- Using NuGet, add the Bootstrap Less Sourcepackage to your Web Application project.
- Add a new bootstrap.lessfile to the ~/Contentfolder (MVC) of your application.
- Delete the entire contents of this file, then click and drag the ~/Contents/bootstrap/bootstrap.lessfile into this file. This will create a @import "bootstrap/bootstrap";entry in your new file.
- To compile this file into CSS files, all you need to do is save the file (i.e. hit CTRL-S, or the Save File button).
- If you make any changes to the files, all you need to do is resave this file.
- 确保正确安装了 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 "bootstrap/bootstrap"; 新文件中的条目。
- 要将这个文件编译成 CSS 文件，您需要做的就是保存文件（即点击 CTRL-S，或保存文件按钮）。
- 如果您对文件进行了任何更改，您只需重新保存此文件。
Doing it this way will allow you easily update your NuGet package when a new version is available. You can add any less variable changes after the @importline.
这样做可以让你在有新版本可用时轻松更新 NuGet 包。您可以在@import行之后添加任何较少的变量更改。
ENJOY!
请享用！
