29

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?

Improve this question
4
  • 1
    Did you ever get this figured out? Commented Apr 16, 2018 at 21:07
  • @Reed Unfortunately not yet. As a workaround I manually override the desired style attributes directly in the component html or in the corresponding component .css file. Commented Apr 20, 2018 at 11:37
  • If you do not use encapsulation then I guess it's useless to declare styles in component's folders. You could make a folder with shared styles instead (anyway they are shared). And thus you just have to import them in a right order. Commented Apr 5, 2019 at 17:06
  • Have you considered theming angular material. material.angular.io/guides This link might give you more idea's to implement your own styles. Commented Apr 10, 2019 at 9:50

3 Answers 3

Reset to default
30
+25

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

I came here with the same idea for an answer, it should work :)
I will check this tonight.
This is the best way of doing it. It also means that you can manage the import order in a single location - which is easy to reason about and maintain 👍 The Angular docs website uses this approach too github.com/angular/angular/blob/master/aio/src/styles/main.scss
3

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.

Improve this answer

1 Comment

But all the .css files I'm using in the above example will be automatically included via angular CLI. I hoped there are some settings in angular-cli.json or somewhere else to adjust the import order
1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.