Since long time, I was believing that I know how to use CSS @import
rule but I wasn't.
Today, and after few tries, I figured it out! IT MUST BE IN TOP OF CSS FILE in order to work as stated in W3 specifications
Any
@import
rules must precede all other at-rules and style rules in a style sheet (besides@charset
, which must be the first thing in the style sheet if it exists), or else the@import
rule is invalid.
So, the following snippet results
override.css
span { color: green !important; }
style.css
span { color: magenta; }
@import url('override.css');
result
lorem ipsum
Instead we should have this
override.css
span { color: green !important; }
style.css
@import url('override.css');
span { color: magenta; }
result
lorem ipsum