2013-04-23 13 views
7

Pracuję nad projektem, w którym chcemy, aby użytkownik mógł definiować własne kolory. Używamy najnowszej wersji Meteera z, między innymi, mniejszą paczką.Jakikolwiek sposób na wprowadzanie wartości do mniejszych plików w Meteorze?

Obecnie wszystkie kolory są zmiennymi znajdującymi się w jednym pliku theme.lessimport, który jest uwzględniany we wczesnej fazie przetwarzania. Wszystkie kolory w witrynie (i wiele kolejnych mniej plików) są generowane z tych kilku zmiennych.

Założeniem było wygenerowanie nowego pliku userTheme.lessimport dla każdego użytkownika, który, jeśli istnieje, może zostać zaimportowany zaraz po pliku theme.lessimport, aby zastąpić zmienne niestandardowymi wartościami. Wszystko działa pięknie i bezbłędnie, jeśli fizycznie dodasz plik do katalogu, ale nie mogę nawet wymyślić sposobu, aby zrobić to dynamicznie/programowo.

Zaczynam się zastanawiać, czy można to zrobić nawet za mniej.

  • Jednym z dużych problemów jest to, że tak dużo css pochodzi od tych zmiennych - w tym CSS dołączonych do wtyczek/modułów naszej aplikacji.
  • wydaje się, że nie można zaimportować zdalnego pliku do włączenia w mniejszej obróbce wstępnej ... więc plik nie może zostać wygenerowany na zdalnym serwerze (byłaby to idealna sytuacja dla naszej sytuacji, ponieważ dane użytkownika będą istnieją na serwerze API).
  • Nie wydaje się, aby istniał jakiś programowy sposób generowania lub w inny sposób wprowadzania jakichkolwiek wartości w mniej - przynajmniej na Meteoru - ponieważ nie mogę znaleźć żadnego sposobu interakcji z mniejszymi za pomocą JS.

Oprócz tej niedogodności, mniej było idealne do tego co robimy, więc naprawdę chcą, aby tę pracę. Mając nadzieję, że ktoś tam ma jakąś mądrość lub kierunek, który mogą przekazać.

+0

Mniej kompilator jest napisany w języku JavaScript i obsługuje interpretację po stronie klienta. Czy konieczne jest, aby kod został skompilowany po stronie serwera? [Zobacz to pytanie] (http://stackoverflow.com/questions/9316385/pass-a-string-of-less-to-less-js-and-receive-css) – sffc

+0

Miałem nadzieję, że będzie sposób z mniejszym pakietem Meteora, który automatycznie pobiera mniej plików, kompiluje je i obsługuje klientów. Być może będziemy musieli przenieść to do bardziej "ręcznego" rozwiązania opartego na kliencie. – ValZho

+4

Twój .less jest kompilowany w czasie pakietu - zanim Meteor zostanie uruchomiony i zanim jakikolwiek klient się połączy. Będziesz chciał wymyślić inną strategię na to. – emgee

Odpowiedz

0

Zobacz, jak pakiet bootstrap3-less implementuje zmienne i mixiny. W szczególności sekcja Advanced Use w pliku README.

"Jeśli chcesz @ importować plik, podaj rozszerzenie .import.less, aby Meteor nie mógł go przetwarzać niezależnie." W twoim przykładzie nazwiesz plik motywu: theme.import.less

0

Oczywiście możesz to zrobić. Wystarczy użyć modułu węzła "fs".

Oto dość głupi przykład. Kiedy to robisz, jest wiele bonusów, ale żeby to sprawdzić, sprawdź to.

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); 
       } 
      }); 
     } 
    }); 
} 
Powiązane problemy