有什么方法可以将值注入Meteor中的Less文件中？

Question

我正在开发一个项目，我们希望用户能够定义自定义颜色。 我们正在运行最新版本的Meteor，其中包括更少的包装。

现在所有颜色都是位于单个theme.lessimport文件中的变量，它在处理过程中包含在内。 整个站点中的所有颜色（以及许多后续较少的文件）都是从这些少数变量生成的。

我们的想法是为每个用户生成一个新的userTheme.lessimport文件，如果存在，可以在theme.lessimport文件之后导入，以覆盖具有自定义值的变量。 如果你将文件物理地添加到目录中，这一切都可以很好地完美地工作，但我似乎无法想到一种动态/编程方式。

我开始怀疑这是否可以用更少的东西来完成。

• 其中一个大问题是，这么多的css都来自这些变量 - 包括我们自己的应用程序的插件/模块中包含的CSS。
• 看来您无法导入远程文件以包含在较少的预处理中......因此无法在远程服务器上生成该文件（这对于我们的情况来说是理想的情况，因为用户数据将存在于API服务器）。
• 似乎没有任何编程方式来生成或以其他方式将任何值注入到更少 - 至少在Meteor上 - 因为我找不到任何方式与较少通过JS进行交互。

除了这种不便之外，我们正在做的事情已经不那么完美了，所以我真的很想做到这一点。 希望有人可以传授一些智慧或方向。

Answer 1

看一下bootstrap3-less软件包如何实现变量和mixin。 特别是其自述文件的高级用法部分。

“如果你想@import一个文件，给它扩展.import.less以防止Meteor独立处理它。” 因此，在您的实例中，您将命名您的主题文件：theme.import.less

Answer 2

当然你可以做到。 只需使用“fs”节点模块即可。

这是一个相当愚蠢的例子。 当你这么做时会有很多陷阱，但是对于一个基本的概念验证，请检查一下。

if (Meteor.isClient) {
    Template.hello.greeting = function () {
        return "Welcome to less_injector_meteor_test.";
    };

    Template.hello.events({
        'click #button': function () {
            var css = "body {background: " + $("#color").val() + ";}";
            Meteor.call("writeToUserThemeFile", css);
        }
    });
}

if (Meteor.isServer) {
    Meteor.methods({
        "writeToUserThemeFile" :function(css) {
            var fs = Npm.require("fs");
            var path = "/Users/charnjitsingh/Desktop/less_injector_meteor_test";
            fs.writeFile(path+"/user_theme.less", css, function(err) {
                console.log("WRITING FILE");
                if (err) {
                    console.log("ERROR WHEN WRITING", err);
                }
            });
        }
    });
}