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

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

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

你知道怎么做吗？有没有比更新（2015年9月29日）更简单的方法 离开WebEssentials，使用更少的编译器和干净的CSS插件

为Windows下载并安装（32位）

打开node.js命令提示符

使用以下命令安装：npm Install-g less

使用以下命令安装：npm Install-g less plugin clean css

转到“项目属性”>“生成事件”，并将下面的“粘贴”命令复制到“预生成事件”命令行框：
lessc“$（ProjectDir）Content\bootstrap\bootstrap.less”“$（ProjectDir）Content\bootstrap.css”--clean css=“--s1--advanced”

构建项目并在指定位置查找bootstrap.css。（如果尚未启用，则可能需要在解决方案资源管理器中启用“显示所有文件”设置。）

将bootstrap.css文件包含到项目中。查看文件属性并将其“构建操作”设置为“内容”。更新BundleConfig以将此编译文件包含到样式包中

从\Content\bootstrap文件夹中选择所有.less文件。查看文件属性并将其“生成操作”设置为“无”

---

更新（2014年9月24日）：

由于Twitter Boostrap已从休息室切换到Grunt，我建议寻找此解决方案的新用户考虑： 或者

请注意，这里提到的解决方案中没有一个使用Web Essentials 2013

---

最后，我决定使用Twitter推荐的休息室。如果您想使用Visual Studio 2013（RC/RTM）将预构建的bootstrap 3 less使用到css中，可以按照以下步骤进行操作：

为Windows下载并安装（32位）

全局安装npm包–打开node.js命令提示符并运行命令：
npm安装凹槽–g

使用NuGet Library软件包管理器并将该软件包安装到Asp.Net MVC 5 Web/Azure Web角色项目中

转到“项目属性”>“生成事件”，并将下面的“粘贴”命令复制到预生成事件命令行：框：
休会“$（ProjectDir）Content\bootstrap\bootstrap.less”--压缩>“$（ProjectDir）Content\bootstrap compiled.css”

构建项目并在指定位置查找bootstrap-compiled.css。（如果尚未启用，则可能需要在解决方案资源管理器中启用“显示所有文件”设置。）

将bootstrap-compiled.css文件包含到项目中。查看文件属性并将其“构建操作”设置为“内容”。更新BundleConfig以将此编译文件包含到样式包中

从\Content\bootstrap文件夹中选择所有.less文件。查看文件属性并将其“生成操作”设置为“无”

可以使用相同方法使用“”命令 样本：

---

您不想使用BundleTransformer.Less有什么原因吗？再简单不过了。我按照文档中提到的所有步骤尝试BundleTransformer，但应用程序抛出错误（500内部服务器错误）。我试了很多次调试，但都没能找出问题所在。我认为这是目前最好的选择。无论依赖什么，它都不会与新版本的LESS一起工作，这意味着，以及大多数其他依赖最新LESS的框架都不会被编译。另请参阅：Visual Studio中Twitter引导库的高级定制：谢谢-非常棒。需要补充的一点是，您可能希望禁用Tools/Options/Web Essentials/Less中的“保存时生成CSS文件”和“保存时缩小生成的CSS文件”。Bootstrap的3.1版已从Neurse切换到grunt contrib Less。由于VisualStudioWebEssentials使用grunt的成本较低，因此我已切换到使用grunt。您可能需要手动更正“-g”，而不是从这里开始处理它。它的>npm安装-g“@SteveS:WebEssentials不使用Grunt。（它直接调用

lessc

）执行上述步骤后，我产生了一个错误。我还需要将路径添加到path环境变量中。在那之后它工作得很好！谢谢设置路径=%path%；%APPDATA%\npm；%PROGRAMFILES（X86）%\nodejsf对于刚起步的人来说，这似乎是未来的最佳实践方法。

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