如何使用Asp.net MVC 5和Web Essentials 2013编译Twitter Bootstrap 3.0 LESS

Question

我已设置 Visual Studio 2013 RC 和 Web Essentials 2013。我正在尝试使用 ASP.Net MVC 5 创建 Azure Cloud Service 和 Web Role。安装了 Twitter Bootstrap Less Source 3.0 并想要使用 Web Essentials 2013 打包所有的 less 文件。但我没有得到如何在运行时打包 bootstrap.less 或在设计时将其编译为 bootstrap.css 的任何帮助或文档。有什么简单方法可行吗？是否有比 BundleTransformer.Less 更简单的方法？

- Santosh

---

你不想使用 BundleTransformer.Less 的原因是什么？没有比它更简单的了。 - Cavyn VonDeylen

我按照文档中提到的所有步骤尝试使用BundleTransformer，但应用程序抛出错误（500内部服务器错误）。我尝试了很多调试，但无法确定问题所在。 - Santosh

我认为此时使用BundleTransformer是最好的选择。任何依赖于dotless的东西都无法与新版本的LESS一起工作，这意味着Bootstrap 3.0.0和大多数其他依赖于最新LESS的框架都将无法编译。 - Roland

另请参阅：在Visual Studio中对Twitter Bootstrap库进行高级定制：http://tarkus.me/post/70489442659 - Konstantin Tarkus

Answer 1

更新（2015年9月29日）：

不要使用Web Essentials，改用LESS Compiler和它的Clean CSS插件。

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. 在项目属性 > Build Events中将以下命令复制粘贴到Pre-build event command line框内：
   lessc "$(ProjectDir)Content\bootstrap\bootstrap.less" "$(ProjectDir)Content\bootstrap.css" --clean-css="--s1 --advanced"
6. 构建项目并查找指定位置的bootstrap.css。（如果还没有，您可能需要在Solution Explorer中启用“Show All Files”设置。）
7. 将bootstrap.css文件包含到您的项目中。查看文件属性并将其“Build Action”设置为“Content”。更新BundleConfig以将此已编译文件包括在StyleBundle中。
8. 从\Content\bootstrap文件夹中选择所有.less文件。查看文件属性并将其“Build Action”设置为“None”。

---

更新（2014年9月24日）：

由于Twitter Boostrap已经从RECESS转向Grunt，因此我建议新用户考虑使用LESS Compiler或Grunt来实现这个解决方案。

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

---

最后，我决定使用Twitter推荐的RECESS。如果你想在Visual Studio 2013（RC / RTM）中将预构建的bootstrap 3 less转换为css，请按照以下步骤操作：

1. 下载并安装Windows版Node.js（32位）。
2. 全局安装RECESS npm软件包-打开node.js命令提示符并运行以下命令：
   npm install recess –g
3. 使用NuGet库程序包管理器，将Bootstrap Less Source 3.0.0程序包安装到您的Asp.Net MVC 5 Web / Azure Web Role项目中。
4. 进入项目属性 > 构建事件并将下面的命令复制粘贴到前置构建事件命令行:框中：
   recess "$(ProjectDir)Content\bootstrap\bootstrap.less" --compress > "$(ProjectDir)Content\bootstrap-compiled.css"
5. 生成项目并查找指定位置的bootstrap-compiled.css文件。（如果还没有，您可能需要在“解决方案资源管理器”中启用“显示所有文件”设置。）
6. 将bootstrap-compiled.css文件包含到您的项目中。查看文件属性并将其“生成操作”设置为“内容”。更新BundleConfig以将此已编译文件包含到您的StyleBundle中。
7. 从\Content\bootstrap文件夹中选择所有.less文件。查看文件属性并将其“生成操作”设置为“无”。

- Santosh

---

谢谢 - 太棒了。还有一个小建议 - 你可能想要在“工具/选项/Web Essentials/Less”中禁用“保存时生成CSS文件”和“保存时压缩生成的CSS文件”。 - Steve S

Bootstrap 的 3.1 版本已经从 Recess 切换到了 grunt-contrib-less。由于 Visual Studio WebEssentials 在使用 Less 时也使用了 grunt，因此我也切换到了使用 grunt。 - Steve S

你可能需要手动输入“-g”，而不是从这里复制。它是 > npm install recess "-g" - hsobhy

@SteveS：Web Essentials 不使用 Grunt。（它直接调用 lessc） - SLaks

按照上述步骤操作时，我遇到了一个错误。我需要将recess的路径添加到我的PATH环境变量中。之后它就运行得很好！谢谢。set path=%path%;%APPDATA%\npm;%PROGRAMFILES(X86)%\nodejs - Scott Obert

Answer 2

是否可以使用 'lessc' 命令以同样的方式进行操作示例：

   lessc "$(ProjectDir)Content\bootstrap\bootstrap.less"  "$(ProjectDir)Content\bootstrap-compiled.css"

- Rodrigo Porcionato

---

对于刚开始接触的人来说，这似乎是未来最佳实践方法。 - cchamberlain