如何使用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云服务和Web角色.安装了Twitter Bootstrap Less Source 3.0,并希望使用Web Essentials 2013 捆绑所有较少的文件.

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

知道如何做到这一点？有没有比BundleTransformer.Less更简单的方法.

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. 转到项目属性>构建事件并将以下命令复制粘贴到预构建事件命令行框:
   lessc"$(ProjectDir)Content\bootstrap\bootstrap.less""$(ProjectDir)Content\bootstrap.css"--clean -css =" - s1 --advanced"
6. 构建项目并在指定位置查找bootstrap.css.(如果尚未,您可能需要在解决方案资源管理器中启用"显示所有文件"设置.)
7. 将bootstrap.css文件包含到项目中.查看文件属性并将其"构建操作"设置为"内容".更新BundleConfig以将此编译文件包含到StyleBundle中.
8. 从\ Content\bootstrap文件夹中选择所有.less文件.查看文件属性并将其"构建操作"设置为"无".

更新(2014年9月24日):

由于Twitter Boostrap已从RECESS切换到Grunt,我建议寻找此解决方案的新用户考虑: LESS Compiler或Grunt.

请注意,此处提及的解决方案均不使用Web Essentials 2013.

最后,我决定使用Twitter推荐的RECESS.如果您想使用Visual Studio 2013(RC/RTM)将预先构建的bootstrap 3更少地用于css,您可以按照以下步骤操作:

1. 下载并安装适用于Windows的Node.js(32位).
2. 全局安装RECESS npm包 - 打开node.js命令提示符并运行命令:npm install recess
   -g
3. 使用NuGet Library Package Manager并将Bootstrap Less Source 3.0.0软件包安装到您的Asp.Net MVC 5 Web/Azure Web角色项目中.
4. 转到项目属性>构建事件并在命令下复制粘贴到预构建事件命令行: box:
   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文件.查看文件属性并将其"构建操作"设置为"无".

Answer 2

可以使用相同方法样本的' lessc '命令:

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