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

Question

我已经安装了Bootstrap软件包和一个自定义模板,它给了我大约10个其他CSS文件.

当我将所有CSS文件放入client/stylesMeteor捆绑包并缩小所有CSS时,这很好.

但捆绑/加载顺序非常重要.因为,你知道,他们是级联的.

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

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

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

2. 在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