Meteor中如何控制CSS的捆绑顺序？

Question

我已经安装了 Bootstrap 包和一个自定义模板，它为我提供了大约 10 个其他 CSS 文件。

当我将所有 CSS 文件放入 client/styles Meteor 时，会捆绑并缩小所有 CSS，这很好。

但是捆绑/加载顺序非常重要。因为，你知道，它们是级联的。

Meteor 对client 中的 CSS 文件采取的捆绑顺序是什么？

控制它的唯一方法是用数字重命名我的所有样式表文件吗？

100-my_style_that_overwrites_some_bootstrap_defaults.css
110-some_other_styles.css
120-lol.css

然后 CSS 打包的顺序是：

1. bootstrap.css from the bootstrap package
2. 100-my...
3. 110-some...
4. 120-lol...

有没有更优雅实用的方法来做到这一点？

Answer 1

CSS 根据文件加载顺序排序（根据 Meteor 文档稍作调整以仅考虑 CSS 文件）：

有几个加载顺序规则。它们按顺序应用 到应用程序中的所有适用文件，在给定的优先级 下面：

1. 以 main 开头的文件。最后加载
2. 接下来会加载任何 lib/ 目录中的文件
3. 接下来会加载路径更深的文件
4. 然后按整个路径的字母顺序加载文件

您可以将要加载的文件放在lib 目录中，也可以使用问题中的文件命名约定。

对于全粒度控制，您必须创建一个包，并且您可以明确定义您希望如何加载 css 文件。

1. 创建一个包：

在你的 Meteor 项目目录中

meteor create --package styles

1. 在packages/styles 目录中，您将有一个package.js 文件，您可以在其中明确定义加载顺序。

将 css 文件移动到 /packages/styles 目录后，您可以在 Package.onUse 方法中使用您定义的顺序：

api.addFiles([
    'bootstrap.css',
    '100-my...css',
    '110-some...css',
    '120-lol.css'
], 'client');

请注意，您可能会认为这种约定很尴尬，但如果您想在应用中轻松交换主题，它会有所帮助，您可以轻松删除包并添加另一个包。

最后将包添加到您的应用中，或者让您的应用承认它：

meteor add styles