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 ?
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
- Put your css in
/client folder and understand the Meteor's rules to choose in which order your css get loaded :
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
/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).