css - lesscss : how to reparse everything from javascript?

Question

我的 less 文件依赖于许多变量，例如:

@fontRegular:       "AvenirNextCondensed-Regular";

类使用这些变量，如下所示:

.thisClass {
   font-family: @fontRegular;
}

如您所料，我需要即时重新设置主题。

主题本身重新定义了那些变量，如下所示):

@fontRegular:       "HelveticaNeue";

我如何才能 require less 来重新解析所有内容(我的意思是我的 less 文件)以及如何首先更改变量？

Answer 1

只需从您的 javascript 中调用 less(在本例中，它来 self 的 Controller )，如下所示:

    less.modifyVars(
        $scope.config.fontStyleHelveticaNeue? {
            '@fontRegular':     "HelveticaNeue",
            '@fontUltraLight':  "HelveticaNeue-UltraLight",
            '@fontDemiBold':    "HelveticaNeue-CondensedBold"
        }
        : {
            '@fontRegular':     "AvenirNextCondensed-Regular",
            '@fontUltraLight':  "AvenirNextCondensed-UltraLight",
            '@fontDemiBold':    "AvenirNextCondensed-DemiBold"
        }
    );

在上面的例子中，所有带@前缀的词都是我更新的 less 变量(实际上，那里有两个集合)。Less 会自动重建所有的 css。