17

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

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

知道怎么做吗？有没有比BundleTransformer.Less更简单的方法。

4

2 回答 2

34

更新（2015 年 9 月 29 日）：

离开 Web Essentials 并使用 LESS 编译器及其 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) 在 css 中使用预构建的 bootstrap 3 less，您可以按照以下步骤操作：

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

可以使用具有相同方法示例的“ lessc ”命令：

   lessc "$(ProjectDir)Content\bootstrap\bootstrap.less"  "$(ProjectDir)Content\bootstrap-compiled.css"
于 2014-03-06T01:43:29.177 回答