less.modifyVars 在 Asp.Net MVC 中不起作用

Question

我已阅读 this 在 Asp.Net MVC5 中使用 Less 的教程。

为了在 ASP.NET MVC 中集成 LESS，我下载并安装了 dotless NuGet 包。

然后添加这个包：

var lessBundle = new Bundle("~/Less").Include("~/Content/Less/*.less");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);

这里是LessTransform：

public class LessTransform : IBundleTransform
{
  public void Process(BundleContext context, BundleResponse response)
  {
    response.Content = dotless.Core.Less.Parse(response.Content);
    response.ContentType = "text/css";
  }
}

到目前为止一切顺利。一切都按预期进行。

这是我的.less 文件中的一部分：

@CustomMessageBackgroundColor: #65B6A7;

div.custom-dialog {
    ...
    background: @CustomMessageBackgroundColor;
}

现在，我想从.js 文件中动态更改这个变量的值：

less.modifyVars({ '@CustomMessageBackgroundColor': 'blue' });
less.refreshStyles();

但是，这不起作用。 我已阅读所有 SO 问题，据我所知，这必须有效。

谢谢。

Answer 1

您正在混淆两种不同的 LESS 编译器实现。

如果您在浏览器中使用 less.js 编译样式表，您的 javascript 调用可能会起作用，但是由于您是在服务器端使用 dotless 编译它们，因此您在浏览器中得到的是编译后的 CSS它不再包含变量——它们已经在那个时候展开了。