Meteor 每个布局导入 LESS 文件答案

【问题标题】：Meteor import LESS files per layoutMeteor 每个布局导入 LESS 文件
【发布时间】：2017-07-25 15:23:22
【问题描述】：

我有一个带有几个不同 blaze 布局模板的流星项目，我希望它们每个都有自己的 LESS 样式表。如何在每个布局的基础上导入它们，即不在 main.less 文件中全部导入它们？

【问题讨论】：

【解决方案1】：

最简单的方法是从模板 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 文件时，无论是通过预先加载、导入还是动态导入，它都会将编译后的 less 插入页面。

【讨论】：

【解决方案2】：

问题在于，在生产中，Meteor 将所有 CSS 连接到一个大文件中，因此您不能仅将特定文件附加到一个模板。

我基本上通过像这样定义一个自动包装器 div 来解决这个问题：

在您的路由器中，定义一个默认布局，例如在 IronRouter 中：
```
Router.configure({
    layoutTemplate: 'mainLayout',
});
```

在您的 mainLayout 模板中，创建一个像这样的包装 div：

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

像这样定义一个全局 currentRouteName 助手：

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

这样，使用此布局模板的每个模板都将自动包装在一个带有 custom-page-wrapper-XXXX 类的 div 中，该类对于每个模板都是唯一的，并且基于路由的名称（保证是唯一的或否则 ironRouter 会报错）。

之后，您可以在所需的任何 LESS 文件中指定该类中的任何特定于模板的样式。

虽然这与为每个模板指定不同的文件并不完全相同，但它在功能上完成了相同的事情，唯一的开销是额外的包装 div。

【讨论】：