Meteor：如何为多个布局删除导入的 scss答案

【问题标题】：Meteor: How to remove imported scss for multiple layoutMeteor：如何为多个布局删除导入的 scss
【发布时间】：2016-08-10 18:35:11
【问题描述】：

我正在使用 flow-router 处理 Meteor 1.4，并且我必须使用多个布局模板。

路由 /site/template1 加载

BlazeLayout.render('Template1', {
  main: 'All_Schools'
});

Template.Template1.onCreated(function () {
  import '../styles/template1.scss';
});

路由 /site/template2 加载

BlazeLayout.render('Template2', {
  main: 'All_Schools'
});

Template.Template2.onCreated(function () {
  import '../styles/template2.scss';
});

问题是.. template1 和 template2 在 UI 中有模板链接 (so no hard reload)。如果用户更改模板。缓存的 scss 样式会影响新样式。如何删除导入的scss文件onDestroy？还是我应该改变我的方法？

【问题讨论】：

【解决方案1】：

我会以不同的方式处理这个问题。像这样在模板中加载样式没有任何好处，因为 Meteor 目前不支持代码拆分。相反，我建议您将样式与模板分开，然后将每个模板包装在顶级类选择器中，该选择器可用于控制每个特定模板的样式。

例如，您可以将所有样式存储在 /imports/ui/stylesheets 目录中，然后按照您的意愿进行拆分：

/imports/ui/stylesheets/template1.scss
/imports/ui/stylesheets/template2.scss
...

然后，您将在 /client/main.scss 文件中引用所有这些样式表以加载它们，例如：

@import "{}/imports/ui/stylesheets/template1.scss";
@import "{}/imports/ui/stylesheets/template2.scss";
...

您的个人模板将被包装在顶级类选择器中，例如：

template1.html

<template name="template1">
  <div class="template1">
    ...
  </div>
</template>

然后可以将每个模板的样式包装在匹配的顶级选择器中，例如：

/imports/ui/stylesheets/template1.scss

.template1 {
  .some-class1 {
    ...
  }
  .some-class2 {
    ...
  }
  ...
}

这样，您可以完全分离出每个组件的样式（根据需要），但仍然能够利用样式继承。

【讨论】：