流星:如何删除多个布局的导入scss

Question

我正在用Meteor 1.4开发flow-router，我必须使用多个布局模板。

/site/template1 路由 loads

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

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

/site/template2 路由 loads

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

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

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

Answer 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 {
    ...
  }
  ...
}

通过这种方式，您可以为每个组件完全分离样式(视需要而定)，但仍然能够利用样式继承。