Meteor每个布局导入更少的文件

我有一个meteor项目，有几个不同的blaze布局模板，我希望每个模板都有自己的较少样式表。如何按布局导入它们，即不将它们全部导入main.less文件

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

我通过定义一个自动包装器div来解决这个问题，如下所示：

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

在mainLayout模板中，创建一个换行div，如下所示：

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

之后，您可以在该类中的任何较少的文件中指定任何特定于模板的样式

---

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

最简单的方法是从模板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...
});

//File layout.html
//无文件布局
.布局包装器{
显示器：flex；
证明内容：中心；
}
//文件layout.js
导入“/layout.html”；
导入“/layout.less”；
Template.layout.onCreated（函数（）{
//等等。。。
});

现在，当您通过快速加载、导入或动态导入加载模板的

layout.js

文件时，它会将编译的less插入页面

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

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

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