Question

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

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

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

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

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

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

Answer 1

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

“如果你想@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);
                }
            });
        }
    });
}

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

2 个答案: