如何控制Meteor中CSS的绑定顺序?

如何控制Meteor中CSS的绑定顺序?,meteor,Meteor,我已经安装了Bootstrap包和一个自定义模板,该模板为我提供了大约10个其他CSS文件 当我将所有CSS文件放入client/stylesMeteor包并缩小所有CSS时,这很好 但是捆绑/装载顺序非常重要。因为,你知道,它们是层叠的 Meteor在客户端中对CSS文件的绑定顺序是什么 控制它的唯一方法是用数字重命名我的所有样式表文件吗 100-my_style_that_overwrites_some_bootstrap_defaults.css 110-some_other_styles

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

当我将所有CSS文件放入
client/styles
Meteor包并缩小所有CSS时,这很好

但是捆绑/装载顺序非常重要。因为,你知道,它们是层叠的

Meteor在
客户端中对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...

有没有更优雅实用的方法可以做到这一点?

CSS是根据文件加载顺序排序的(根据Meteor文档稍微调整,以仅考虑CSS文件):

有几种加载顺序规则。它们是按顺序应用的 应用程序中的所有适用文件,以给定的优先级 下:

  • 以main开头的文件。最后一批货
  • 接下来将加载任何lib/目录中的文件
  • 下一步加载具有更深路径的文件
  • 然后按照整个路径的字母顺序加载文件
  • 您可以将要首先加载的文件放在
    lib
    目录中,或者在问题中使用文件命名约定

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

  • 创建一个包:
  • 在Meteor项目目录中

    meteor create --package styles
    
  • packages/styles
    目录中,您将有一个
    package.js
    文件,您可以在其中明确定义加载顺序
  • 一旦您将css文件移动到
    /packages/styles
    目录中,就可以使用您在
    包中定义的顺序。onUse
    方法:

    api.addFiles([
        'bootstrap.css',
        '100-my...css',
        '110-some...css',
        '120-lol.css'
    ], 'client');
    
    <>请注意,您可能认为本公约是尴尬的,但它可以帮助如果您想轻松地交换应用程序中的主题,您可以轻松地删除包并添加另一个。 最后将软件包添加到您的应用程序中,或者让您的应用程序确认:

    meteor add styles
    

    CSS是根据文件加载顺序排序的(根据Meteor文档稍微调整,仅考虑CSS文件):

    有几种加载顺序规则。它们是按顺序应用的 应用程序中的所有适用文件,以给定的优先级 下:

  • 以main开头的文件。最后一批货
  • 接下来将加载任何lib/目录中的文件
  • 下一步加载具有更深路径的文件
  • 然后按照整个路径的字母顺序加载文件
  • 您可以将要首先加载的文件放在
    lib
    目录中,或者在问题中使用文件命名约定

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

  • 创建一个包:
  • 在Meteor项目目录中

    meteor create --package styles
    
  • packages/styles
    目录中,您将有一个
    package.js
    文件,您可以在其中明确定义加载顺序
  • 一旦您将css文件移动到
    /packages/styles
    目录中,就可以使用您在
    包中定义的顺序。onUse
    方法:

    api.addFiles([
        'bootstrap.css',
        '100-my...css',
        '110-some...css',
        '120-lol.css'
    ], 'client');
    
    <>请注意,您可能认为本公约是尴尬的,但它可以帮助如果您想轻松地交换应用程序中的主题,您可以轻松地删除包并添加另一个。 最后将软件包添加到您的应用程序中,或者让您的应用程序确认:

    meteor add styles
    

    谢谢如何确保这些CSS文件在单独的bootstrap包中包含的bootstrap.CSS文件之后加载?此外,CSS文件引用其他文件夹中的外部图像文件,以获取背景图像和其他内容。我将所有CSS文件放入
    /packages/styles
    目录,但是图像呢?您可以使用
    api.use(“tbs:boostrap”)
    “首先使用另一个软件包。对于图像,使用
    api.addFiles
    像css文件一样正常添加它们。嘿@Akshat你介意看看我的另一个问题吗?谢谢。如何确保这些CSS文件在单独的bootstrap包中包含的bootstrap.CSS文件之后加载?此外,CSS文件引用其他文件夹中的外部图像文件,以获取背景图像和其他内容。我把所有的CSS文件放在
    /packages/styles
    目录下,但是图像呢?你可以使用
    api.use(“tbs:boostrap”)
    “让它先使用另一个包。对于图像,像CSS文件一样使用
    api.addFiles
    正常添加它们。嘿@Akshat你介意看看我的另一个问题吗?