如何控制Meteor中CSS的绑定顺序?
我已经安装了Bootstrap包和一个自定义模板,该模板为我提供了大约10个其他CSS文件 当我将所有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
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你介意看看我的另一个问题吗?