How to adjust import order of .css files in Angular

angular override component css
angular import css from assets
angular component styles not working
ng-deep
how to add external css file in angular 8
angular.json styles not working
how to override global css style in angular
angular global css

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?

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.

Angular cli changes css files order when build � Issue #9475 , Angular cli changes css files order when build #9475. Closed. chaouiy opened CLI version is used. To disable this warning use "ng set --global warnings. moved all css files from angular.json to styles.scss using @import� Each components has it own stylesheet (css, scss, less, etc). It's quite often that you might need to include global styling files (especially variables file) in your component. We've talked on this a bit in our other Angular styles article: Using Sass with the Angular CLI. Let's explore another option for importing style files:

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.

How to adjust import order of .css files in Angular 5, 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",� The very easy and first to do way is go to main css file called styles.css in the src root floder. This styles.css file is globally declared file. Here you will import your all css links like below css codes. These are my css files to line in my project.

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.

Component styles, One way to do this is to set the styles property in the component metadata. In order to scope the specified style to the current component and all its You can also import CSS files into the CSS files using the standard CSS @import rule. @ErazerBrecht I am using a .scss file with the imports of the third party style instead of the style.css and I am having the same issue, every time I run the command ng build --prod it create the dist folder but the style.css is like corrupted because all classes are together in 1 line and are not taking effect, same happens to the main.js file. 😓 😭

This is how angular-cli/webpack delivers your CSS styles to the , Find out why we are a great fit for you. � You can write the styles in this file directly or import using CSS specific imports. Angular-CLI uses webpack under the hood and only configures it. Webpack applies all loaders in the reverse order so css-loader will be applied first followed by the style-loader . Try renaming src/styles.css to src/styles.scss and in that file include the other styles in your src/sass directory. If you like check out this GitHub project of mine in which I do what you are trying to do now. Notice that in the angular.json file a i set "styles": [ "src/styles.scss" ], – lealceldeiro Jun 15 '18 at 15:42

Angular - Shortcut to Importing Styles Files in Components, Angular - Shortcut to Import Styles Files in Component. Each components has it own stylesheet (css, scss, less, etc). It's quite often that you might need to We need to import the file in order to use it: hello.component.scss @import " variables"; // change to just variables, say goodbye to ../../../stylings/ h1� CSS @importslink. You can also import CSS files into the CSS files using the standard CSS @import rule. For details, see @import on the MDN site. In this case, the URL is relative to the CSS file into which you're importing.

Angular Global CSS styles, There are several ways to add Global CSS styles to the Angular app. The styles can be added inline, imported in index.html or added via angular-cli.json. We will also learn how to add custom CSS files & external style sheet to angular application. Order of the styles sheets are important as the last one overrides the� angular.json. Option 2. You can add direct link into src/index.html file. Open src/index.html file and insert css file path into head tag and js file path insert into bottom before closing body tag. For detail see below code. src/index.html

Comments
  • Did you ever get this figured out?
  • @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.
  • 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.
  • Have you considered theming angular material. material.angular.io/guides This link might give you more idea's to implement your own styles.
  • 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
  • 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