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

Question

我有一个很大的遗留 CSS 文件，我想将其翻译成 LESS - 本身没什么大不了的，但它引用了图像的硬编码域。这在普通 css 中很痛苦，但我们在开发阶段设法以一种肮脏的方式处理了这个问题；我想我可以 "parameterize" 这个 url 使用 LESS 取决于我们的配置（开发、集成、生产）——比如：

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

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

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

Answer 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 使用正确的值编译。

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

How to parameterize a less file using Web Essentials?

asp.net-mvc

less

web-essentials