CODEWITHSUNDEEP
cssmeteor
aei
aei

Reputation: 250

How to use multiple CSS files in Meteor

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

Upvotes: 17

Views: 21776

Answers (2)

physiocoder
physiocoder

Reputation: 712

As stated by @imslavko you can find Meteor behaviour at https://guide.meteor.com/structure.html

However these rules are more relevant for .js code and .htmltemplate files: Meteor merge and minimize all .css in 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>.

Remember to put all frontend files inside client folder, to avoid unnecessary server loading and availability.

So you can choose your convenient folder structure for .css files, for example put them all in client/stylesheets or use other subfolders to better manage them.

Upvotes: 8

Shariq Ansari
Shariq Ansari

Reputation: 4641

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.

Upvotes: 34

Related Questions