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


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.


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';