Question

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

Answer 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插入到页面中。

Answer 2

问题在于，在制作过程中，Meteor将所有CSS连接成一个大文件，因此您无法将特定文件仅附加到一个模板。

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

在路由器中，定义默认布局，例如在ironRouter：
```
uid
```

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

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

定义一个全局currentRouteName帮助器，如下所示：

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

这样，使用此布局模板的每个模板都将自动包装在div中，该div具有自定义页面包装器-XXXX类，该类对于每个模板并且基于路由的名称是唯一的（这是保证的）要是唯一的，否则ironRouter会引发错误。）

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

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

Meteor每个布局导入LESS文件

2 个答案: