Bất kỳ cách nào để đưa các giá trị vào các tệp Ít trong Meteor?

Question

Tôi đang làm việc trên một dự án mà chúng tôi muốn người dùng có thể xác định màu tùy chỉnh. Chúng tôi đang chạy phiên bản mới nhất của Meteor, trong số những người khác, gói ít hơn.

Ngay bây giờ tất cả các màu là các biến nằm trong một tệp theme.lessimport duy nhất được bao gồm sớm trong quá trình xử lý. Tất cả các màu trong toàn bộ trang web (và nhiều tệp ít hơn tiếp theo) được tạo ra từ vài biến này.

Ý tưởng là chỉ tạo tệp người dùngTheme.lessimport mới cho mỗi người dùng, nếu có, có thể được nhập ngay sau tệp theme.lessimport để ghi đè các biến có giá trị tùy chỉnh. Tất cả đều hoạt động tốt đẹp và hoàn hảo nếu bạn có thể thêm tập tin vào thư mục, nhưng tôi dường như không thể nghĩ ra một cách để làm nó một cách tự động/lập trình.

Tôi bắt đầu tự hỏi nếu điều này thậm chí có thể được thực hiện với ít hơn.

• một trong những trường hợp treo lớn là rất nhiều css được bắt nguồn từ các biến này - bao gồm CSS kèm theo các plugin/mô-đun của ứng dụng riêng của chúng tôi.
• có vẻ như bạn không thể nhập tệp từ xa để đưa vào chế độ ít tiền xử lý ... do đó không thể tạo tệp trên máy chủ từ xa (đây là tình huống lý tưởng cho tình huống của chúng tôi khi dữ liệu người dùng sẽ tồn tại trên máy chủ API).
• dường như không có cách nào có lập trình để tạo hoặc đưa bất kỳ giá trị nào vào ít hơn - ít nhất là trên Meteor — vì tôi không thể tìm cách tương tác với ít thông qua JS hơn.

Ngoài sự bất tiện này, ít được hoàn hảo cho những gì chúng tôi đang làm, vì vậy tôi thực sự muốn thực hiện công việc này. Hy vọng ai đó ra có một số trí tuệ hoặc hướng họ có thể truyền đạt.

Answer 1

Hãy xem cách gói bootstrap3-less triển khai các biến và mixin. Cụ thể là phần Sử dụng nâng cao của README của họ.

"Nếu bạn muốn @import một tệp, hãy cho nó phần mở rộng .import.less để ngăn Meteor xử lý độc lập." Vì vậy, trong trường hợp của bạn, bạn sẽ đặt tên cho tệp chủ đề của mình: theme.import.less

Answer 2

Tất nhiên bạn có thể làm điều đó. Chỉ cần sử dụng mô-đun nút "fs".

Đây là một ví dụ khá ngu ngốc. Có rất nhiều gotchas khi bạn làm điều đó, nhưng đối với một bằng chứng cơ bản của khái niệm, kiểm tra này.

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