Meteor Import LESS-Dateien pro Layout

Question

Ich habe ein Meteor-Projekt mit ein paar verschiedenen Blaze-Layout-Vorlagen und ich möchte für sie, um jeweils ihre eigenen weniger Stylesheets haben. Wie importiere ich sie pro Layout, d. H. Nicht alle in der Datei main.less importieren?

Answer 1

Das Problem ist, dass Meteor in der Produktion alle CSS in eine große Datei verkettet, so dass Sie keine bestimmte Datei nur an eine Vorlage anhängen können.

Ich habe dies um, indem im Grunde wie so eine automatische Wrapper div definieren:

1. In Ihrem Router definiert ein Standard-Layout z.B. in ironRouter:

   Router.configure({ 
       layoutTemplate: 'mainLayout', 
   }); 
   

2. In Ihrem mainLayout Vorlage, eine Verpackung div etwas wie folgt erstellen:

   <div class="custom-page-wrapper-{{currentRouteName}}"> 
       {{> yield}} 
   </div> 
   

3. eine globale currentRouteName Helfer wie folgt definieren:

   UI.registerHelper("currentRouteName",function(){ 
       return Router.current() ? Router.current().route.getName() : ""; 
   }); 
   

Damit jede Vorlage, die dieses Layout-Vorlage verwendet, wird automatisch mit einer benutzerdefinierten-Seite-Wrapper-XXXX-Klasse in einem div gewickelt werden, die jede Vorlage und auf der Grundlage der Route Name eindeutig ist (die ist garantiert einzigartig oder sonst ironRouter wird einen Fehler auslösen).

Danach können Sie jedes Template-spezifische Styling innerhalb dieser Klasse in einer beliebigen LESS-Datei angeben.

Obwohl dies nicht genau dasselbe ist wie das Angeben einer anderen Datei für jede Vorlage, führt es funktional die gleiche Sache mit der einzigen Ausgabe aus, die eine extra Wrapper div ist.

Answer 2

Der einfachste Ansatz sie aus Ihrer Vorlage js Dateien wie so wörtlich zu importieren ist:

// File layout.html 
<template name="layout"> 
    <div class="layout-wrapper"> 
    </div> 
</template> 

// File layout.less 
.layout-wrapper { 
    display: flex; 
    justify-content: center; 
} 

// File layout.js 
import './layout.html'; 
import './layout.less'; 

Template.layout.onCreated(function() { 
    // etc... 
}); 

Wenn Sie nun die layout.js Datei Vorlage laden, entweder von eifrigen Laden, importiert oder dynamische Importe, wird es einfügen das kompilierte weniger auf der Seite.