Shouldn't CSS from a CDN be loaded first?

Geoffrey Booth

unread,

Mar 5, 2013, 8:01:39 PM3/5/13

to meteo...@googlegroups.com

I'm trying to load Twitter Bootstrap (and Font Awesome) via CDN. I've put the appropriate <link>s in the <head> block of my index.html. I also have my own styles.css file that defines my custom overrides to Bootstrap, such as changing the body font. However it seems that my styles.css file is always loaded first in the processed HTML, before the external CDN-loaded styles; so my styles get overridden unless I carefully append lots of !important declarations throughout my styles.

I know I can also solve this problem by adding the bootstrap package, if I'm willing to sacrifice the CDN speed boost, but . . . shouldn't this not be the default behavior? Shouldn't any custom .css files in my project automatically be loaded last, after any CSS declarations in any files' <head> blocks and after any .css files loaded by any packages? Is there a way, other than lots of !important declarations, to use a CDN-loaded CSS file and then add my own customizations?

Adrian Lanning

unread,

Mar 7, 2013, 9:25:01 AM3/7/13

to meteo...@googlegroups.com

If I am understanding correctly, a simple solution would be to extract your custom css into a file in the public folder and manually link it after the links to the CDN css files.

Regarding ordering of items in the head block, there is at least one card on the Meteor Roadmap dealing with this and I've seen it come up before on this list. I've personally had issues with meta tags for IE and mobile which need to come early in the order getting pushed down and causing problems. Its more a matter of priorities than anything else...I'm sure it will get fixed eventually. If it is really a pain point, the quickest way to get it resolved is to research it and submit a pull request. :-)

Eric Hsu

unread,

Aug 25, 2013, 8:31:24 PM8/25/13

to meteo...@googlegroups.com

With the recent release of Bootstrap 3, I'd also like to use CSS and JS from a CDN, and I'm still bumping into this issue as of 0.6.5. Is there any downside to having the Meteor lines in the <head> load LAST in all cases? I imagine this would be a simpler change than setting up some API to control a more flexible load order?

Eric Hsu

unread,

Aug 25, 2013, 9:04:38 PM8/25/13

to meteo...@googlegroups.com

Okay, I found a workaround that is perhaps obvious in retrospect. I save my custom CSS files to public/ and load them by URL in the <head> after the CDN files.

Downsides: my CSS isn't auto-minified.

Upsides: it works.

- Eric

Geoffrey Booth

unread,

Aug 26, 2013, 9:46:59 AM8/26/13

to meteo...@googlegroups.com

Hi Eric,

If you want to load your own custom CSS files, you can simply place them in any client-loaded folder and Meteor will serve them up (and minify them). They don't need to be referenced in the HEAD at all.

The question was about loading CDN-served CSS or JavaScript files, like <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> or <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

Thanks,

Geoffrey

Eric Hsu

unread,

Aug 26, 2013, 12:19:17 PM8/26/13

to meteo...@googlegroups.com

hi Geoffrey,

I agree. The issue is that I had a custom CSS file that I wanted to override the bootstrap 3 defaults, but the bootstrap 3 was loading from a CDN in the head. As far as I know, all CSS files in the meteor directories get minified and loaded BEFORE the CDN files, so the CDN bootstrap overrides my CSS. I am working around it by explicitly loading a copy of my override css from public/ after the CDN file.

thanks, Eric

Gopalakrishna Palem

unread,

Jan 9, 2015, 1:21:01 AM1/9/15

to meteo...@googlegroups.com

Has this issue been fixed in the latest Meteor ? Facing similar problem - CDN is coming last and package files are coming first

Reply all

Reply to author

Forward