如何在VS 2013中编译Bootstrap LESS源码

Question

我安装并更新了Visual Studio 2013 Ultimate Update 4和Web Essentials插件。我下载了Bootstrap V3.3.1源码，并将其中的css、js、fonts和less文件夹复制到Visual Studio中。

现在，我想在编辑.less文件后编译所有文件，以覆盖bootstrap.css文件。我在Solution Explorer中选择了所有文件，右键单击，但所有Web Essentials菜单项都被禁用了。

我应该按照哪些步骤来编译所有文件为.css文件，或者我应该使用不同于Web Essentials的工具？

参考截图如下：

- Amr Elgarhy

---

你只需要编译bootstrap.less文件（该文件会导入所有其他文件）。此外，请注意自BS 3.2以来，您将不得不为您的代码添加浏览器前缀（请参见：https://github.com/postcss/autoprefixer#visual-studio）。 - Bass Jobsen

你有Web Essentials吗？ - Lowkase

你是在更改bootstrap文件本身还是将bootstrap.less导入到你的CSS架构中？ - Lowkase

改变Bootstrap代码中的代码并不是一个好的方法。相反，制作一个less文件，并将"@import PATH/bootstrap.less"导入其中。这样，您就可以覆盖整个Bootstrap库。在新的LESS文件中覆盖变量和其他元素。设置预编译器来编译您的新文件。通过导入（通过导入链接）将为您编译Bootstrap主题。 - Lowkase

@Lowkase 是的，这是我的问题，如何设置编译器来编译我的 .less 文件？ - Amr Elgarhy

Answer 1

记录一下，当前的Web Essentials会在编辑时重新编译任何已编译文件，包括非生成CSS文件，例如variables.less。您只需要手动编辑它们以将它们放入此模式中。例如，想要重新定义Bootstrap变量的新项目的过程如下：

1. 确保已安装当前的Web Essentials Visual Studio程序包。
2. 将Bootstrap Source NuGet程序包添加到站点中。
3. 手动编辑您想要自动生成的文件，例如/Content/bootstrap/bootstrap.less和theme.less。当您保存时，第一次编译将发生，生成.css和min.css作为解决方案资源。
4. 现在，当您编辑相关文件（例如variables.less进行品牌推广）时，在构建期间，编译的bootstrap和主题CSS会自动更新。

唯一不好的地方是第一次必须编辑原始源代码，更改时间戳。希望这不会对未来的NuGet程序包更新造成问题。

Web Essentials项目中有一个未解决的问题。一个简单的解决方案是在上下文菜单选项中手动执行它，另一个是在Visual Studio中的文件上设置永久设置，例如构建操作或自定义工具操作。

https://github.com/madskristensen/WebEssentials2013/issues/1632

你可以在 Visual Studio 的“工具-选项-Web Essentials-LESS”设置中更改重新编译的行为。

- Tony Wall