Why @import-ed css rules don't override previously defined ones?


#1

This is odd compared to standard HTML+CSS. If use the same selector twice in the file, the second rule wins. If I push that second selector into a separate file and include it, the first one wins.

Here’s the css file from Typescipt hello world template. As you can see the theme is @import-ed on the bottom, and yet the red color set above sticks. My experiments with overrides have the same behavior.

Why?

/*
In NativeScript, the app.css file is where you place CSS rules that
you would like to apply to your entire application. Check out
http://docs.nativescript.org/ui/styling for a full list of the CSS
selectors and properties you can use to style UI components.

/*
For example, the following CSS rule changes the font size of all UI
components that have the btn class name.
*/
.btn {
    font-size: 18;
    background-color: red;
}

 /* Rules works here
.btn {
    font-size: 24;
    background-color: green;
    
}*/


/*
In many cases you may want to use the NativeScript core theme instead
of writing your own CSS rules. For a full list of class names in the theme
refer to http://docs.nativescript.org/ui/theme.
*/
@import 'nativescript-theme-core/css/core.light.css';

/* Rule is ignored here */
@import '~/overrides.css';