Menu
I'v seen some similar questions about overriding styles with @import, people suggest to put @import at the bottom, but that does not seem to work here.
--- index.html --- <head> <link rel="stylesheet" href="style.css" /> </head> <body> This text should be green. </body> --- style.css --- body {color: red;} @import url('style-override.css'); --- style-override.css --- body {color: green;} The example above will output red text, while green is expected.
Declaring style-override.css after style.css inside head will solve the problem, but I want to use @import inside a css file.
Adding !important in style-override.css will also get the expected result, but that is not the way it should work.
Can anyone explain this?
804
The @import rule tells the CSS engine to import an external style sheet into another style sheet. This allows style rules from a style sheet to be added to another style sheet. This rule can also be used in combination with media queries to import a style sheet based on the device type.
Overriding the Base Styles scss . In order to override a base style file, you need to copy over the chain of files that is used to import it. $default-primary-light-color: #42bdf7; // and here!
That isn't working because any import rule declared inside of a stylesheet must come before everything else - otherwise, ...well, it doesn't work ;) .
So, what you should have in your style.css stylesheet is:
@import url('style-override.css'); body {color: red;} @import rules must be at the top. This is what the CSS spec. says about it:
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.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
