如何使用 Web Essentials 参数化 less 文件？答案

【问题标题】：How to parameterize a less file using Web Essentials?如何使用 Web Essentials 参数化 less 文件？
【发布时间】：2016-07-04 09:39:27
【问题描述】：

我有一个很大的遗留 CSS 文件，我想将其转换为 LESS - 本身没什么大不了的，但它引用了一个硬编码的图像域。这在普通的 CSS 中很痛苦，但我们在开发阶段设法以一种肮脏的方式处理它；我想我可以根据我们的配置（开发、集成、生产）使用 LESS 来“参数化”这个 url - 比如：

#if DEBUG 
    @import 'debug'
#elseif INTEGRATION
    @import 'integration'
#elseif PROD
    @import 'production'
#endif

我想要实现的目标有可能吗？

我正在使用 MVC .Net 5 和 Web Essentials 2013。

【问题讨论】：

我能想到的一个选项是将环境特定的设置保存在配置文件或其他东西中，并在每个环境中都有该文件的版本，并具有适当的设置。您可以导入 .less 文件，其中的所有变量都将可用。 @import "environmentSettings.css";现在，只需在这个 css 文件中声明变量。
@ArunGeorge 是的，但是我们的部署是自动化的，我不能忽略 git 中的此类文件并为每个环境保留特定版本，因为所有编译都是在同一台服务器上进行的。跨度>
不是每个环境都有一个分支吗？如果有，您可以使用适合该分支的值将该文件的副本保存到每个分支中。如果每个环境没有不同的分支，则构建过程中应该有一个步骤，该步骤执行特定于环境的任务，例如选择适当的文件。它可能是构建过程中的一个步骤，它选择许多可用文件中的一个，或者使用属性文件等。
@ArunGeorge 实际上我使用的是 git-flow 约定；因此，如果我可以在每个分支中拥有该文件的特定版本，但是在每个版本中（基于每个开发人员提交工作的开发分支），我将不得不手动更改文件；这是不可能的，因为我无权访问部署服务器。我将尝试使用 Visual Studio 中的预构建事件来更改文件的内容，看看它是否可以通过这种方式简单地实现。

【解决方案1】：

好吧，我实际上找到了一个解决方案：使用预构建事件将特定文件复制到主 .less 文件引用的文件中。

所以，在 main.less 中：

@import (optional) "_Variables"; ...some code...

在 _Variables.less 中，这是一种填充物，因此 main.less 找到每个具有默认值的变量： @myVar = "someDefaultValue";

在 _VariablesDebug.less 中： @myVar = "debugValue";

在 _VariablesRelease.less 中： @myVar = "releaseValue";

以此类推，每个配置都有自己的名为 _Variables{Configuration}.less 的文件，所有这些配置都具有每个变量的正确值。

最后，在预构建事件中：

xcopy "$(ProjectDir)Path\To\Less\Files\_Variables$(ConfigurationName).less" "$(ProjectDir)Path\To\Less\Files\_Variables.less" /Y

每次编译时，_Variables.less 文件被配置所需的文件替换，main.less 用正确的值编译。

【讨论】：