Ionut Captari Ionut Captari - 8 months ago 42
CSS Question

how to stop meteor from auto merging my css files?

I have 2 html files linked to eachother and have different css files for each of them , but meteor merges them automatically.
How do I stop this ?

Answer Source

You cannot. Meteor merges CSS to optimize its network delivery.
If you want to choose the order your stylesheets have in the merged CSS you may need to :
- Use a language as SASS, LESS or Stylus which allow to generate css so you could do @import 'imports/ui/yourstylesheet.scss' to @import files in the order you want. Note that if you choose to use a language as SASS or LESS you need to put your sass/less files that you want to import into /imports so you manually import them (puting files anywhere else than in /imports makes your files automatically imported). And import these files via a SASS/LESS/stylus file in the /client folder.
- Put your css in /client folder and understand the Meteor's rules to choose in which order your css get loaded :

The JavaScript and CSS files in an application are loaded according to these rules:

Files in subdirectories are loaded before files in parent directories, so that files in the deepest subdirectory are loaded first, and files in the root directory are loaded last.

Within a directory, files are loaded in alphabetical order by filename.

After sorting as described above, all files under directories named lib are moved before everything else (preserving their order).

Finally, all files that match main.* are moved after everything else (preserving their order).

- You put your .css in the /imports directory (so Meteor doesn't import them automatically so you can choose in which order you load css files). And you import your css via a .js (javascript) file put into /client (as files into /client are loaded on your browser). In the .js file you do import '/imports/ui/mystylesheet.css' to import your css.

The cons of the three methods are respectively :
- You have to learn a language if you don't know any of these languages : stylus less or sass.
- Relying on complex rules to choose the order your css get loaded is probably not maintainable and oblige you to have specific names for your css
- css files loaded within a .js file are put in a <style> tag inside the DOM instead of being loaded in a separate .css file (which is not recommended). Besides the css loaded this way doesn't use the toolchain offered by Meteor plugins (compression of CSS, add pre-vendor prefixed to maximize the compatibility of your css and whatever the plugin you have offers you).