Also see issue #24
I’m putting together a PR for a feature to allow the merged CSS stylesheets to be placed somewhere other than the top of the
<head> block. The problem with the current implementation (merged CSS goes at the top) is that if you use something like Bootstrap than any Bootstrap CSS overrides you might have (which are in the merged CSS bundle) get clobbered when Bootstrap is loaded. The fix seems straight-forward enough (just swap the load order) but I need to resolve exactly what this feature looks like. There are 3 competing options:
Move the CSS bundle to the end of the head. PROS: Solves the general problem, trivial to implement. CONS: Are there any cases where this will break existing apps?
Use a “component” tag such as
<cssbundleatbottom>as a flag to put the CSS bundle at the bottom. If not present, CSS bundle goes at the top. PROS: maintains backward compatibility, relatively easy to implement, can be placed anywhere in the head CONS: Less flexible than option 3.
<link rel="stylesheet" href="meteor_merged_css" />to indicate where in the head to place the CSS bundle. Could instead use a “component” tag such as
<putcsshere>. If not present, then place it at the top to be compatible. PROS: Completely flexible for all use cases, maintains backward compatibility. CONS: Somewhat complex to implement, I don’t actually see a use case for this much flexibility as opposed to option 2, but someone might.
I have working (but ugly) versions of all 3 options already coded. If you have a preference or any other suggestions, please leave a comment here or on issue #24. If there isn’t a consensus by Feb 10th, I’m going to go with option 3 since it is the most flexible.