[英]How do I compile the Bootstrap-3.0.0-wip less folder to .css with Visual Studio and Web Essentials 2012?
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. 我可以使用外部工具将.less编译为.css,但尚不清楚如何将.less文件编译为.css,作为使用最新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.
(尽管当前VS插件提供了.less兼容性*),我可以在预览窗口中看到.less文件的编译输出,但是我无法弄清楚在运行项目时如何保存或自动编译输出。
*VS 2012.2 update, Microsoft Web Developer Tools, and Web Essentials 2012 * VS 2012.2更新,Microsoft Web开发人员工具和Web Essentials 2012
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上格式化的bootstrapless文件夹。
Add the bootstrap-3.0.0-wip folder to a Visual Studio web project. 将bootstrap-3.0.0-wip文件夹添加到Visual Studio Web项目。 (my project happened to be an ASP.Net MVC 4 Empty project, but it shouldn't matter.)
(我的项目碰巧是一个ASP.Net MVC 4空项目,但这无关紧要。)
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文件夹中。
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.
除非仍然存在编译错误,否则应将移动的bootstrap.less文件编译为bootstrap.css和bootstrap.min.css文件。 (see error list for details)
(有关详细信息,请参见错误列表)
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. 如果将Bootstrap3.0.0-wip源代码集成到ASP.MVC 4项目中,则可以利用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中检索的)
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. 要使用VS 2012 + Web Essentials 2012编译.less文件,您的.less文件必须没有错误。 Each .less file that requires an import or mixin must specify it.
每个需要导入或混入的.less文件都必须指定它。 Highlight your .less file and preview the output in the preview pane.
突出显示.less文件,并在预览窗格中预览输出。 If there is an error specified, your compile to .css will not work.
如果指定了错误,则无法编译为.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). b)Web Essentials 2012(+ VS 2012)似乎无法识别文件夹中的多个.less文件,这些文件都是由单个入口点文件导入的,例如Bootstrap 3.0-wip中的bootstrap.less文件(除非每个文件都如此)列出其所需的进口)。 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.
因此,大多数Bootstrap .less文件无法编译,因为它们没有定义其变量和mixins。 (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.
(由于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. d)由于步骤c是一项耗时的工作,因此我建议暂时使用外部编译器来编译bootstrap较少的文件。 At least until Web Essentials allows you to set an entry point and compile a folder of dependent .less files in the required order.
至少直到Web Essentials允许您设置入口点并以所需顺序编译依赖的.less文件的文件夹。
Based on the changelog for Web Essentials, I'd say this was fixed on July 31st, 2013 ("Fixed LESS relative @import issue"). 基于Web Essentials的变更日志 ,我想说这已在2013年7月31日修复(“相对LESS相对于@import的固定问题”)。 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).
我刚刚在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. 对于任何想做同样事情的人,在安装Web Essentials之后我要做的就是将.less文件添加到我的Css文件夹中,将boostrap.js文件添加到我的Scripts文件夹中,将字体文件添加到我的Fonts文件夹中(Bootstrap现在使用字体而不是精灵图片),并且在我的主视图中包含已编译的bootstrap.css和bootstrap.js文件。 Note that I also right clicked one of the .less files to generate the solution settings (some config file used by Web Essentials).
请注意,我还右键单击.less文件之一以生成解决方案设置(Web Essentials使用的某些配置文件)。 And to get the .css file generated the first time, I just made a superficial change and saved it.
为了第一次生成.css文件,我做了一个表面的更改并将其保存。
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相同:
Doing it this way will allow you easily update your NuGet package when a new version is available. 这样可以在有新版本可用时轻松地更新NuGet软件包。 You can add any less variable changes after the @import line.
您可以在@import行之后添加任何较少的变量更改。
ENJOY! 请享用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.