How to handle CSS with meteor?

Question

I am building a test app to learn how to organize multiple files with METEOR.

I have a head.html and inside I have the following link to my custom CSS:

<!-- Custom CSS -->
    <link type="text/css" rel="stylesheet" href="/stylesheets/globals/style.css"/>

Very normal, Yet I have trouble to make that working.

Here is my app directory:

-app folder
---client
-----head.html
-----index.html
-----stylesheets
-------globals
---------style.css

I know it seems to be a very basic question but I can not figure it out.

saimeunt · Accepted Answer · 2015-04-19 18:10:32Z

2

Basically you have 2 ways of inserting CSS in a Meteor project :

Using the Meteor build tool to automatically concatenate and minify all your CSS files living in the client/ directory : in this case you don't need to import your stylesheets using a link tag in the head. This is perfect for vital CSS files that your app should load when started.

Example : put your CSS file under client/stylesheets/globals/style.css and that's it, no need to import it, it's automatically injected in your project by Meteor.

Using the classic way of importing stylesheets in a web application : you can put your CSS files inside the public/ directory and they will be served by your app server. In this case the Meteor build process will be skipped so files won't be concatenated together nor minified. Use this method when you want to lazy load big CSS files only needed in a subpart of your app (for example admin section styling).

Example : put your minified CSS file under public/stylesheets/admin/style.css, and use something like iron:router to load the CSS file when hitting the admin route.

Router.route("/admin", {
  // onRun hooks executed only once
  onRun: function(){
    // create a link taf holding a reference to our publicly served CSS file
    var link=$("<link>",{
      rel: "stylesheet",
      href: "/stylesheets/admin/style.css"
    });
    // append to the head tag
    $("head").append(link);
  }
});

edited Apr 19, 2015 at 18:10

answered Apr 19, 2015 at 18:03

saimeunt

22.7k2 gold badges58 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Antoine Over a year ago

Thanks a lot for your answer. Do you think of any simple way to put some <a> tag inside my index.html that would serve other html templates located inside a "templates" folder ? Do I need to define some routes ?

saimeunt Over a year ago

Sure, search for iron:router related resources.

Collectives™ on Stack Overflow

How to handle CSS with meteor?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related