How to use multiple CSS files in Meteor

Question

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:

1. Where should I locate the CSS files? (or from where I can control which directories are loaded)
2. Is it possible to load specific CSS files in particular order?

Here are the current references I have in my HTML file, before migrating to meteor.

    <!-- 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! :)

Answer 1

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.