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

【问题标题】：Any way to inject values into Less files in Meteor?有什么方法可以将值注入 Meteor 中的 Less 文件？
【发布时间】：2013-04-17 05:57:01
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

Less 编译器是用 JavaScript 编写的，它支持客户端解释。代码是否需要在服务器端编译？ See This Question
我希望 Meteor 构建的 less 包有一种方法可以自动抓取任何更少的文件，编译它们，并将它们提供给客户。我们最终可能不得不将其转移到更“手动”的基于客户端的解决方案。
你的 .less 是在打包时编译的——在 Meteor 运行之前和任何客户端连接之前。你会想为此想出一个不同的策略。
你可以用流星包做基本的 Css。然后使用 http 请求渲染覆盖。比如像这样创建一个webserver httpServer = Npm.require('http');然后用标准的nodeless编译器编译less>css。
也许官方的“CSS 变量”也能解决你的问题？它们非常暴露，因此可以轻松操作。不过，还没有准备好迎接黄金时段：caniuse.com/css-variables

标签： javascript meteor less

【解决方案1】：

当然可以。只需使用“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);
                }
            });
        }
    });
}

【讨论】：

【解决方案2】：

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

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

【讨论】：