如何在 Meteor 中使用多个 CSS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22826421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use multiple CSS files in Meteor
提问by aei
I've started using meteor and want to know what is a good way to migrate a HTML file that refers to many CSS files. So far, I found that meteor will automatically load all CSS files in an alphabetic order. My two questions are as follows:
我已经开始使用meteor 并且想知道什么是迁移引用许多CSS 文件的HTML 文件的好方法。到目前为止，我发现meteor 会自动按字母顺序加载所有CSS 文件。我的两个问题如下：
- Where should I locate the CSS files? (or from where I can control which directories are loaded)
- Is it possible to load specific CSS files in particular order?
- 我应该在哪里找到 CSS 文件？（或者我可以从哪里控制加载哪些目录）
- 是否可以按特定顺序加载特定的 CSS 文件？
Here are the current references I have in my HTML file, before migrating to meteor.
在迁移到meteor 之前，这是我的HTML 文件中的当前引用。
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Libs CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="vendor/owl-carousel/owl.carousel.css" media="screen">
<link rel="stylesheet" href="vendor/owl-carousel/owl.theme.css" media="screen">
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" media="screen">
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/theme-elements.css">
<link rel="stylesheet" href="css/theme-animate.css">
<!-- Current Page Styles -->
<link rel="stylesheet" href="vendor/rs-plugin/css/settings.css" media="screen">
<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen">
<!-- Skin CSS -->
<link rel="stylesheet" href="css/skins/blue.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/theme-responsive.css" />
Thank you for your help! :)
感谢您的帮助！:)
回答by Shariq Ansari
There is no need to provide reference of stylesheets in meteor. Just put your css file in client/stylesheets folder. Meteor will automatically apply these css rules.
不需要在meteor中提供样式表的参考。只需将您的 css 文件放在 client/stylesheets 文件夹中。Meteor 将自动应用这些 css 规则。
回答by physiocoder
As stated by @imslavko you can find Meteor behaviour at https://guide.meteor.com/structure.html
正如@imslavko 所述，您可以在https://guide.meteor.com/structure.html 上找到 Meteor 行为
However these rules are more relevant for .jscode and .htmltemplate files: Meteor merge and minimize all .cssin a single file (as long as they are provided by you and not on a CDN) so you will find a single <link rel="stylesheet">reference in your <head>.
然而，这些规则与.js代码和.html模板文件更相关：Meteor 将所有内容合并并最小化.css到一个文件中（只要它们由您提供而不是在 CDN 上），因此您将<link rel="stylesheet">在<head>.
Remember to put all frontend files inside clientfolder, to avoid unnecessary server loading and availability.
请记住将所有前端文件放在client文件夹中，以避免不必要的服务器负载和可用性。
So you can choose your convenient folder structure for .cssfiles, for example put them all in client/stylesheetsor use other subfolders to better manage them.
因此，您可以为.css文件选择方便的文件夹结构，例如将它们全部放入client/stylesheets或使用其他子文件夹来更好地管理它们。
