如何使用 Asp.net MVC 5 和 Web Essentials 2013 编译 Twitter Bootstrap 3.0 LESS [英] How to compile Twitter Bootstrap 3.0 LESS using Asp.net MVC 5 and Web Essentials 2013

问题描述

我已经设置了 Visual Studio 2013 RC 和 Web Essentials 2013.我正在尝试使用 ASP.Net MVC 5 创建 Azure 云服务和 Web 角色.安装了 Twitter Bootstrap Less Source 3.0 并希望使用 Web Essentials 2013 捆绑所有less文件.

I've set up Visual Studio 2013 RC and Web Essentials 2013. I'm trying to create an Azure Cloud Service and a Web Role using ASP.Net MVC 5. Installed Twitter Bootstrap Less Source 3.0 and wanted to bundle all less files using Web Essentials 2013.

我没有得到有关如何在运行时捆绑 bootstrap.less 或在设计时将其编译为 bootstrap.css 的任何帮助或文档.

I did not get any help or documentation on how to go about bundling bootstrap.less at run time or compile it into a bootstrap.css at design time.

知道怎么做吗?有没有比 BundleTransformer.Less.

Any idea how it can be done? Is there any simpler way than BundleTransformer.Less.

推荐答案

UPDATE (29-SEP-2015):

离开 Web Essentials 并使用 LESS Compiler 及其 Clean CSS Plugin.

UPDATE (29-SEP-2015):

Leave Web Essentials and use LESS Compiler along with its Clean CSS Plugin.

1. 为 Windows 下载并安装 Node.js(32 位).
2. 打开 node.js 命令提示符.
3. 使用以下命令安装 LESS:npm install -g less
4. 安装less-plugin-clean-css 使用命令:npm install -g less-plugin-clean-css
5. 转到项目属性>构建事件并将下面的命令复制粘贴到预构建事件命令行框中:
   lessc "$(ProjectDir)Contentootstrapootstrap.less" "$(ProjectDir)Contentootstrap.css" --clean-css="--s1 --advanced"
6. 构建项目并在指定位置查找 bootstrap.css.(如果尚未启用，您可能需要在解决方案资源管理器中启用显示所有文件"设置.)
7. 将 bootstrap.css 文件包含到您的项目中.查看文件属性并将其构建操作"设置为内容".更新 BundleConfig 以将此编译文件包含到您的 StyleBundle 中.
8. 从 Contentootstrap 文件夹中选择所有 .less 文件.查看文件属性并将其构建操作"设置为无".

1. Download and install Node.js (32-bit) for Windows.
2. Open node.js command prompt.
3. Install LESS using the command: npm install -g less
4. Install less-plugin-clean-css using the command: npm install -g less-plugin-clean-css
5. Go to Project Properties > Build Events and copy-paste below command to Pre-build event command line box:
   lessc "$(ProjectDir)Contentootstrapootstrap.less" "$(ProjectDir)Contentootstrap.css" --clean-css="--s1 --advanced"
6. Build the project and look for bootstrap.css at the specified location. (If not already, you may need to enable "Show All Files" settings in the Solution Explorer.)
7. Include the bootstrap.css file into your project. View file properties and set its "Build Action" to "Content". Update BundleConfig to include this compiled file into your StyleBundle.
8. Select all .less files from Contentootstrap folder. View file properties and set its "Build Action" to "None".

<小时>

更新(2014 年 9 月 24 日):

---

UPDATE (24-SEP-2014):

由于 Twitter Boostrap 已从 RECESS 切换到 Grunt，我建议寻找此解决方案的新用户考虑:LESS 编译器 或 咕噜声.

Since Twitter Boostrap has switched from RECESS to Grunt, I would recommend the new users looking for this solution to consider: LESS Compiler or Grunt.

请注意，这里提到的所有解决方案都没有使用 Web Essentials 2013.

Please note that none of the solutions mentioned here use Web Essentials 2013.

最后，我决定使用 Twitter 推荐的 RECESS.如果您想使用 Visual Studio 2013 (RC/RTM) 在 css 中少使用预构建的引导程序 3，您可以按照以下步骤操作:

Finally, I decided to use RECESS recommended by Twitter. If you want to use pre-built bootstrap 3 less into css using Visual Studio 2013 (RC / RTM), you can follow the steps given below:

1. 为 Windows 下载并安装 Node.js(32 位).
2. 全局安装RECESS npm包——打开node.js命令提示符并运行命令:
   npm 安装凹槽 -g
3. 使用 NuGet 库包管理器并安装 Bootstrap Less Source 3.0.0 打包到您的 Asp.Net MVC 5 Web/Azure Web 角色项目.
4. 转到项目属性>构建事件并将下面的命令复制粘贴到预构建事件命令行:框:
   recess "$(ProjectDir)Contentootstrapootstrap.less" --compress > "$(ProjectDir)Contentootstrap-compiled.css"
5. 构建项目并在指定位置查找 bootstrap-compiled.css.(如果尚未启用，您可能需要在解决方案资源管理器中启用显示所有文件"设置.)
6. 将 bootstrap-compiled.css 文件包含到您的项目中.查看文件属性并将其构建操作"设置为内容".更新 BundleConfig 以将此编译文件包含到您的 StyleBundle 中.
7. 从 Contentootstrap 文件夹中选择所有 .less 文件.查看文件属性并将其构建操作"设置为无".

1. Download and install Node.js (32-bit) for Windows.
2. Install RECESS npm package globally – Open node.js command prompt and run the command:
   npm install recess –g
3. Use NuGet Library Package Manager and install the Bootstrap Less Source 3.0.0 package to your Asp.Net MVC 5 Web / Azure Web Role project.
4. Go to Project Properties > Build Events and copy-paste below command to Pre-build event command line: box:
   recess "$(ProjectDir)Contentootstrapootstrap.less" --compress > "$(ProjectDir)Contentootstrap-compiled.css"
5. Build the project and look for bootstrap-compiled.css at the specified location. (If not already, you may need to enable "Show All Files" settings in the Solution Explorer.)
6. Include the bootstrap-compiled.css file into your project. View file properties and set its "Build Action" to "Content". Update BundleConfig to include this compiled file into your StyleBundle.
7. Select all .less files from Contentootstrap folder. View file properties and set its "Build Action" to "None".

这篇关于如何使用 Asp.net MVC 5 和 Web Essentials 2013 编译 Twitter Bootstrap 3.0 LESS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！