2013-04-23 52 views
7

我正在研究一个项目,我们希望用户能够定义自定义颜色。我们正在运行Meteor的最新版本,其中包括更少的软件包。任何方法将值注入流星的Less文件?

现在所有的颜色都是位于一个单独的theme.lessimport文件中的变量,它包含在处理的早期。整个网站的所有颜色(以及许多随后的较少文件)都是从这些少数变量生成的。

这个想法是为每个用户生成一个新的userTheme.lessimport文件,如果存在,可以在theme.lessimport文件后面导入,以覆盖具有自定义值的变量。如果你将文件物理地添加到目录中,这一切都会非常完美,完美无瑕,但我似乎甚至想不出以动态/编程方式来实现它的方式。

我开始怀疑这是否可以用较少的方法完成。

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

除了这种不便,少一直是完美的,我们在做什么,所以我真的使这项工作。希望有人能够传授一些智慧或方向。

+0

Less编译器是用JavaScript编写的,它支持客户端解释。是否有必要在服务器端编译代码? [看这个问题](http://stackoverflow.com/questions/9316385/pass-a-string-of-less-to-less-js-and-receive-css) – sffc 2013-05-22 12:10:54

+0

我希望有一种方式Meteor构建的更少的软件包可以自动获取更少的文件,编译它们并将它们提供给客户端。我们可能最终不得不将其转移到更“手动”的基于客户端的解决方案。 – ValZho 2013-05-22 15:49:22

+4

您的.less是在包时运行 - 在Meteor运行之前和任何客户端连接之前进行编译。你会想为这个想出不同的策略。 – emgee 2013-06-28 07:41:54

回答

0

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

“如果您想要@import文件,请为其扩展.import.less以防止Meteor独立处理它。”因此,在您的实例中,您将命名您的主题文件:theme.import.less

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); 
       } 
      }); 
     } 
    }); 
}