Un modo per iniettare valori in Less files in Meteor?

Question

Sto lavorando a un progetto in cui vogliamo che l'utente sia in grado di definire colori personalizzati. Stiamo eseguendo l'ultima versione di Meteor con, tra gli altri, il minor pacchetto.

Al momento tutti i colori sono variabili posizionate in un singolo file theme.lessimport incluso all'inizio dell'elaborazione. Tutti i colori del sito (e molti altri file successivi) sono generati da queste poche variabili.

L'idea era di generare un nuovo file utente Theme.lessimport per ogni utente che, se presente, potrebbe essere importato subito dopo il file theme.lessimport per sovrascrivere le variabili con valori personalizzati. Funziona tutto perfettamente e in modo impeccabile se aggiungi fisicamente il file alla directory, ma non riesco nemmeno a pensare a un modo per farlo dinamicamente/programmaticamente.

Sto iniziando a chiedermi se questo può essere fatto anche con meno.

• uno dei grandi problemi è che gran parte del css deriva da queste variabili, incluso il CSS incluso con i plug-in/moduli della nostra app.
• sembra che non sia possibile importare un file remoto per l'inclusione in meno pre-elaborazione ... quindi il file non può essere generato su un server remoto (questa sarebbe la situazione ideale per la nostra situazione dato che i dati dell'utente saranno esiste su un server API).
• non sembra esserci alcun modo programmatico per generare o altrimenti iniettare qualsiasi valore in meno, almeno su Meteor, in quanto non riesco a trovare alcun modo per interagire con il meno attraverso JS.

A parte questo inconveniente, meno è stato perfetto per quello che stiamo facendo, così ho davvero vuole fare questo lavoro. Sperare che qualcuno là fuori abbia una certa saggezza o direzione che possono impartire.

Answer 1

Dai un'occhiata a come il pacchetto bootstrap3-less implementa variabili e mixin. In particolare la sezione Uso avanzato del loro README.

"Se si desidera @importare un file, assegnargli l'estensione .import.less per impedire a Meteor di elaborarlo in modo indipendente." Quindi nel tuo caso nominerai il tuo tema: theme.import.less

Answer 2

Naturalmente puoi farlo. Basta usare il modulo del nodo "fs".

Ecco un esempio piuttosto stupido. Ci sono molti trucchi quando lo fai, ma per un proof-of-concept di base, controlla questo.

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