Angular-cli: CSS incorrect ordering

[phil-cap]

The CSS is being applied in the incorrect order.
I have in styles.css the following

@font-face {
font-family: 'SomeFont';
src: url('./assets/some-font.woff') format('woff');
}
* {
font-family: 'SomeFont';
}

My angular-cli.json file is

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],

However, the resulting CSS is such that the Bootstrap font family overwrites my custom font. Changing the order does not have an impact.

I am using Windows 7 with ng version 1.0.0-beta.26.

[RicardoVaranda]

Hi @phil-cap ,

I have tried to repo this issue by doing the following:

npm install --save bootstrap

Modified styles to be:

"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
]

Modified styles.css to be:

/* You can add global styles to this file, and also import other style files */
@font-face {
  font-family: 'SomeFont';
  src: url('./assets/Aaargh.ttf') format('ttf');
}
* {
  font-family: 'SomeFont';
}

In app.component.html:

Amazing Text just to test :)

The result is that the styles.css font was applied correctly and loaded the correct font.

A better approach would be to be as precise as you can with the css selector rather than using just * you can use #myDiv *

If you can please give me a more specific use case for me to test for this behaviour.

[phil-cap]

@RicardoVaranda thanks for your efforts! That is very strange because i have the exact same scenario with a different result. I have resolved the issue by specifying the * selector at each component's CSS style file. Its an ugly solution however. Are you using production ready code? I only end up with a single styles file after using the prod command of angular-cli. Perhaps that plays a role... I will have another look at my set up and prepare a Plunker.

[filipesilva]

Closing as answered by @RicardoVaranda.

[dev008webO]

hello @RicardoVaranda . well in mycase,

"styles": [
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
        "../node_modules/owl.carousel/dist/assets/owl.theme.default.css",
        "../node_modules/ngx-toastr/toastr.css",
        "assets/css/Custom_style.css"
      ]

it is loading bootstrap.css after Custom_style.css only in production build (when ng build --prod --aot) and not in serve (when ng serve).

• i am running on
  Angular CLI: 6.0.1 Node: 8.11.2 OS: linux x64

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}