7

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

现在所有颜色都是位于单个 theme.lessimport 文件中的变量，该文件包含在处理的早期。整个站点的所有颜色（以及许多后续的 less 文件）都是从这几个变量生成的。

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

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

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

除了这种不便之外，less 对我们正在做的事情来说是完美的，所以我真的很想完成这项工作。希望外面的人有一些他们可以传授的智慧或方向。

4

2 回答 2

0

当然你可以做到。只需使用“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);
                }
            });
        }
    });
}
于 2014-06-02T13:56:58.723 回答
0

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

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

于 2014-03-26T19:00:49.477 回答