How to load an external css file before the compressed css?


#1

Hi, I need to load a external css file but need to load it before the compressed css files so I can override it’s styles with my own. How can I do it?

The main reason to make this css file (semantic-ui) external is to reduce the build time. What if I move it to a package? Will meteor compress the css file every-time it reloads?


#2

Curious if it made much of a difference with build time.


#3

Unfortunately it did :frowning: Without the semantic-ui package, the build time is nearly 2,000 ms. With the package it’s nearly 6,500 ms! If we remove the package and add the raw semantic-ui css, the build time is 3,500 ms. That’s also a bit high. I have a project with bootstrap with even more packages and it goes only upto 2,500 ms! :slight_smile:


#4

I wonder if removing standard-minifiers (package) would help. Or using post-css instead.

Or maybe you want to make all your stylesheets external. Then, use an npm script to do minification when you want to deploy to production.


#5

Great idea! But I tried to using external style sheets. But external styles load at last. After the styles I define in the app. So I can’t override them in my styles. Any other way to do it other than moving all css outside including the app css?


#6

Maybe in your app css try loading an external css stylesheet wtih @import at the top of the file.


#7

Great Thanks! I’ll try it out!