流星導入每個佈局的LESS文件

Question

我有一個有幾個不同的火焰佈局模板的流星項目，我希望他們每個都有自己的LESS樣式表。如何在每個佈局的基礎上導入它們，即不是將它們全部導入到main.less文件中？

Answer 1

問題是，在生產中，流星將所有CSS連接成一個大文件，因此您不能將特定文件僅附加到一個模板。

我解決這個通過了基本定義，像這樣的自動包裝DIV：

1. 在你的路由器，如定義默認佈局在ironRouter：

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

2. 在你mainLayout模板，創建一個包裝DIV是這樣的：

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

3. 定義一個全局currentRouteName助手這樣的：

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

就這樣，使用該佈局模板每個模板將自動被包裹在一個自定義頁面包裝-XXXX類，它是唯一的每個模板一個div和基於路由的名字（這保證是唯一的，否則IronRouter會引發錯誤）。

之後，您可以在任何需要的LESS文件中指定該類中的任何模板特定樣式。

雖然這與爲每個模板指定不同的文件並不完全相同，但它在功能上完成同樣的事情，唯一的花費是額外的包裝div。

Answer 2

最簡單的方法是從字面上你的模板的js文件中導入像這樣：

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

現在，當您加載模板的layout.js文件，或者通過預先加載，進口，或者動態的進口，它會插入編譯的少到頁面。