如何阻止流星自动合并我的css文件？答案

【问题标题】：how to stop meteor from auto merging my css files?如何阻止流星自动合并我的css文件？
【发布时间】：2017-08-02 11:19:47
【问题描述】：

我有 2 个相互链接的 html 文件，每个文件都有不同的 css 文件，但流星会自动合并它们。我该如何阻止这个？

【问题讨论】：

标签： css meteor merge meteor-blaze

【解决方案1】：

你不能。 Meteor 合并 CSS 以优化其网络交付。
如果您想选择样式表在合并 CSS 中的顺序，您可能需要：
- 使用允许生成 css 的 SASS、LESS 或 Stylus 语言，以便您可以按照您想要的顺序执行 @import 'imports/ui/yourstylesheet.scss' 到 @import 文件。请注意，如果您选择使用 SASS 或 LESS 语言，则需要将要导入的 sass/less 文件放入 /imports 中，以便手动导入它们（将文件放在 /imports 以外的任何位置会使文件自动导入） .和import 这些文件通过/client 文件夹中的SASS/LESS/stylus 文件。
或
- 将您的 css 放入 /client 文件夹并了解 Meteor 的规则以选择加载 css 的顺序：

应用程序中的 JavaScript 和 CSS 文件是根据这些规则：

子目录中的文件在父目录中的文件之前加载，这样最深的子目录中的文件首先加载，并且文件最后加载根目录。

在目录中，文件按字母顺序加载文件名。

按照上述排序后，目录下的所有文件名为 lib 在其他所有内容之前移动（保留它们的顺序）。

最后，所有匹配 main.* 的文件都被移动到其他所有文件之后（保持他们的秩序）。

或
- 您将.css 放在/imports 目录中（因此Meteor 不会自动导入它们，因此您可以选择加载css 文件的顺序）。然后您通过放入/client 的.js (javascript) 文件导入您的css（因为在您的浏览器上加载了/client 中的文件）。在.js 文件中，您可以通过import '/imports/ui/mystylesheet.css' 来导入您的css。

这三种方法的优缺点分别是：
- 如果您不会以下任何一种语言，则必须学习一门语言：stylus less 或 sass。
- 依靠复杂的规则来选择你的 css 加载顺序可能是不可维护的，并且你必须为你的 css 指定特定的名称
- 在.js 文件中加载的css 文件放在DOM 内的<style> 标记中，而不是在单独的.css 文件中加载（不推荐）。除了以这种方式加载的 css 不使用 Meteor 插件提供的工具链（压缩 CSS，添加 pre-vendor 前缀以最大限度地提高 css 的兼容性以及您提供的任何插件）。

【讨论】：

如果有一个选项可以禁用合并以用于开发目的，似乎真的很好......

【解决方案2】：

您可以仔细更改加载顺序。比如让一个覆盖另一个。

例如考虑以下文件结构

|-client
|-imports
  |-ui
     |-page1
       |-page1.html
       |-page1.js
       |-page1.css
     |-page2
       |-page2.html
       |-page2.js
       |-page3.css

这里page1.js会导入page1.css，这个css会应用到page1.html中的模板

同样，page2.js 可以导入 page2.css，在渲染 page2.html 时也是如此。

【讨论】：

我认为这个结构对我来说已经足够了，但是如果我决定创建一个 page1.scss，它将被处理和包含，或者有另一个设置来处理这些文件？
对不起。我以前没有使用过scss。我想，如果您放入处理器（或者默认情况下可能包含它们），它应该可以在没有任何特殊文件处理的情况下工作。

【解决方案3】：

如果您使用的是 Iron 路由器，您可以在调用路由时将您的 css 类添加到模板中。

 Router.route('/addMemberProfile',{
 onBeforeAction: function () {
 $('body').addClass('your required class for this template');

  this.next();
 },

【讨论】：