2013-04-23 16 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); 
       } 
      }); 
     } 
    }); 
}