How to adjust import order of .css files in Angular

Question

My current app (generated via Angular CLI) looks like this:

angular.cli.json (at the root folder):

  ....   "styles": [     "../node_modules/bootstrap/dist/css/bootstrap.min.css",     "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",     "styles.css"   ], 

src/app/app.module.ts

import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; //angular material import {MatTabsModule} from "@angular/material"; import {MatToolbarModule} from '@angular/material/toolbar'; import {MatButtonModule, MatCheckboxModule} from '@angular/material'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatCardModule} from '@angular/material/card'; import {MatListModule} from '@angular/material/list'; //angular components import {AppComponent} from './app.component'; import { CurrentVehicleComponent } from './current-vehicle/current-vehicle.component'; import { BackendCommunicationService } from './backend-communication.service'; import { SharedDataService } from './shared-data.service'; @NgModule({   declarations: [     AppComponent,     CurrentVehicleComponent   ],   imports: [     BrowserModule,     //angular material     MatButtonModule,     MatCheckboxModule,     MatSlideToggleModule,     MatTabsModule,     MatToolbarModule,     MatCardModule,     MatListModule,   ],   providers: [BackendCommunicationService, SharedDataService],   bootstrap: [AppComponent] }) export class AppModule { } 

If I now serve the app (ng serve --open), Angular CLI will include the .css files in the following order:

1. Bootstrap CSS
2. deeppurple-amber.css
3. src/style.css
4. src/app.component.css
5. src/app/current-vehicle.component.css
6. .css file from angular material
7. another .css file from anular material

I'm looking for a way, that angular will add my "handwritten" .css files (4., 5. and .css files from not yet implemented components) at the end (i.e. after 6. and 7.).

In detail:

1. Bootstrap CSS
2. deeppurple-amber.css
3. src/style.css
4. .css file from angular material
5. another .css file from anular material
6. src/app.component.css
7. src/app/current-vehicle.component.css

How is this possible?

---

Update for Bounty

To clarify the issue here. The AngularMaterial components inject their own <style></style> tags with the required css for the component you are referencing. This is always added after the component.css injected <style></style> tags as shown in the first style order listing.

This is an issue because of the following scenario:

<a class="my-custom-btn mat-raised-button">Button</a>  .my-custom-btn{margin: 10px;} .mat-raised-button{margin: 0px;} /* Value From angular material */ 

This is then injected in this order at run time:

<style>.my-custom-btn{margin: 10px;}</style> <style>.mat-raised-button{margin: 0px;}</style> 

Which means that the only workaround would be .my-custom-btn{margin: 10px !important} which is highly unmanigable if you are trying to override some css properties in one component and then a different set of properties in another.

So is there a way to re-arrange the order in which these <style></style> tags are injected by angular at run time?

Answer 1

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.