How to adjust import order of .css files in Angular

Basically, the import order of CSS works in the following file from Angular.

angular-cli.json file has the following config.

styles: [style.css ,import 2,...]

Base order of the CSS file is mentioned in angular-cli.json file.

If you check the angular-cli.json file, will have style.css as default configured in styles array.

imported files inside .css will be ordered in a regular manner.

The CSS you have written in the component level will be loaded with the component on execution.

Hope this helps you.

Imported CSS will follow the usual 'order of importing' rules, so stylesheets imported later will override earlier ones.

So the first thing to do is make sure that your last.css is the last import in index.html

However, components with styleUrls use css encapsulation. This means that each component will generate unique class names and specific css rules, which are more specific, that is: p {color: red} in a component stylesheet will be remapped to e.g p[_ngcontent-c1] {color: red}. This means that if you specify p {color: blue} in your last.css it will be less specific than the component one, and won't be applied.

The easiest way to ensure your final rules 'win out' is to set !important on them - i.e. p {color: red !important} - however this only works if you don't also use !important in the component css too!

Alternatively, you can set encapsulation to None to disable encapsulation and just have global styles:

import { ViewEncapsulation } from '@angular/core';

@Component({
// ...
encapsulation: ViewEncapsulation.None,
styles: [
  // ...
]
})

However this has to be done for each and every component, and runs the risk of other style rules clashing, so care must be taken with this approach.

You need to change to,

"styles": [
    "styles.css" 
],

Then, Link all CSS files in styles.css. Include all files at the top of the styles.css file.

@import url('~bootstrap/dist/css/bootstrap.min.css');
@import url('deeppurple-amber.css');
@import url('~@angular/material/prebuilt-themes/deeppurple-amber.css');
@import url('another_css_file_from_angular_material.css');
@import url('app.component.css'); 
@import url('current-vehicle.component.css');

I hope this will work.