Angular cli changes css files order when build

[chaouiy]

When I check bundle after ng build --prod --aot false I found that css files order was modified by the build process.

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "performance"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/animate.css/animate.min.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/metismenu/dist/metisMenu.js",
        "../node_modules/jquery-sparkline/jquery.sparkline.js",
        "../vendor/pace/pace.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

package.json

{
  "name": "performance",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.1",
    "@angular/common": "^4.0.1",
    "@angular/compiler": "^4.0.1",
    "@angular/compiler-cli": "^4.0.1",
    "@angular/core": "^4.0.1",
    "@angular/forms": "^4.0.1",
    "@angular/http": "^4.0.1",
    "@angular/platform-browser": "^4.0.1",
    "@angular/platform-browser-dynamic": "^4.0.1",
    "@angular/platform-server": "^4.0.1",
    "@angular/router": "^4.0.1",
    "@ngui/auto-complete": "^0.16.0",
    "@swimlane/ngx-charts": "^6.1.0",
    "angular-autofocus-fix": "^0.1.0",
    "angular2-image-upload": "^1.0.0-rc.0",
    "angular2-masonry": "^0.4.0",
    "angular2-moment": "^1.7.0",
    "animate.css": "3.1.1",
    "bootstrap": "^3.3.7",
    "chart.js": "^2.7.1",
    "core-js": "^2.4.1",
    "d3": "^4.11.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.1.0",
    "jquery-slimscroll": "^1.3.8",
    "jquery-sparkline": "^2.4.0",
    "jvectormap": "1.2.2",
    "metismenu": "^2.5.0",
    "ng2-charts": "^1.5.0",
    "ng2-completer": "^1.6.3",
    "ng2-file-upload": "^1.2.1",
    "ng2-smart-table": "^1.2.2",
    "ng2-toastr": "^4.1.2",
    "ngx-bootstrap": "^1.6.6",
    "ngx-slimscroll": "^3.4.1",
    "ngx-ui-switch": "1.4.4",
    "ngx-webstorage": "^1.8.0",
    "peity": "^3.2.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.4"
  }
}

[clydin]

Please provide the output of ng --version.
A minimal reproduction would also be very useful to aid in further investigate of the issue.

[chaouiy]

ng --version:

Your global Angular CLI version (1.6.7) is greater than your local
version (1.6.5). The local Angular CLI version is used.

To disable this warning use "ng set --global warnings.versionMismatch=false".

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.6.5
Node: 9.4.0
OS: linux x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
typescript: 2.4.2
webpack: 3.10.0

[chaouiy]

When I open xxxxbundle.css I find the order of css injections different than the order specified in angular-cli.json

[dgsqrs]

I have the same issue starting cli 1.6.4 (does not occurs on 1.7.0-beta3).

[jmorganmartin]

I can confirm this issue exists in angular-cli 1.65, 1.6.6 and 1.6.7. If you reverse the order of your styles array in angular-cli.json, you can preview the bug in 'serve' mode, to a degree

[jmorganmartin]

@clydin on 1.6.7, when I build with a styles array like below:

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/angular-calendar/dist/css/angular-calendar.css",
    "../node_modules/nouislider/distribute/nouislider.min.css",
    "styles.scss"
  ],

The CSS files are bundled with styles.scss at the top. The rest follow the correct order. (In my screenshoot, nouislider is after angular-calendar on the same line; it's in there, but not in the screenshot).

[jmorganmartin]

Reverting to 1.6.3 (and then installing @angular-devkit/[email protected] manually via NPM) was the only solution I could find.

[chaouiy]

ng build --prod -extract-css false solved the problem until finding final solution

[mark-langer]

@clydin I'm experiencing this issue with the Angular CLI v1.7.1 too. The styles array looks like this:

"styles": [
    "./app/shared/styles/material-theming.css",
    "./app/shared/styles/styles.css"
],

Yet, the CSS of material-theming.css is inserted below the rules of styles.css.

This issue is marked with the label "need: more info". What other info can we provide that would help you debug this?

[Come2Daddy]

I had the same problem while adding third-party CSS framework I wanted to extend. Finaly I just imported it through src/styles.(sass/css/scss) and it works great. As styles you insert into .angular-cli.json are intended to be global, using src/styles.(sass/css/scss) you reach the same goal. I think it's a nice work around.

[rflament]

I had the same problem with 1.6.4 and switching to cli 1.7.4 fixed it.

[msklvsk]

Did a clean npm i with the latest everything, including cli 1.7.4 — the problem is still there.

I’m afraid “need: more info” label diverts attention away from this issue while ng --version was provided back in February.

[danielstern]

Strangely, I notice that the styles are in the desired order when I run in dev mode, but in the wrong order when I run in production.

[andresmgsl]

Any update on this?

[jmorganmartin]

@andresmgsl Not sure which version fixed this, but it's not present in 1.7.1, at least.

[angusoid]

I already reverted CLI twice because of this issue.

1.71 > 1.68
1.74 > 1.68

Same problem with 6.03 version now.

Dev build is fine, prod build still not good.

Related: #10579

[nicolasfoisy]

I solved this issue by placing the css I wanted to import on top of styles.css instead of in the json file like recomended...

[sebek64]

This issue is still present in 6.0.5. Or at least in some form. I'm migrating an existing project to Angular CLI, and when disabling extractCss, it works as intended, while with extractCss enabled, the styles are broken.

[gaim281]

@nicolasfoisy can you please explain what you did there to solve it?
what do you by placing the css... where did you place it? copied it into styles.css?

[usernameisalreadyt4ken]

Still present in 6.0.7. Setting extractCss to false fixes it for me too.

[ErazerBrecht]

Indeed issue is still present:

Repo: https://github.com/ErazerBrecht/ErazerCQRS/blob/5861a00cd484bc689d41212de248e46ba8d8a891/Erazer.Web.Angular/angular.json#L23

styles.css is the last style in the array but when extractCss is enabled, the bootstrap css file overwrites the styles.css rules because it's added under it in the bundle.

Angular CLI: 6.0.8
Node: 10.4.0
OS: win32 x64
Angular: 6.0.4

[oneal1801]

@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.😓😭

do you think I should change it back to the style.css?

[kuflash]

@clydin I also see a similar problem, but I build my application with custom webpack config. And CSS selectors is reorder when I have AngularCompilerPlugin in my pipeline.

I'm created repository for showing this problem. In it you will see 2 directories (dist-dev and dist-prod) with different ordering CSS selectors.

I'm using:

Angular CLI: 6.0.8
Node: 9.10.1
OS: MacOS 10.13.4
Angular: 6.0.9

[kuflash]

It turned out to fix the problem by transferring the import common.scss from the app.module.ts to the browser.module.ts. But I'm sure that this is really the right decision.

I'm uploaded this fix in fix-reorder branch

[Trojaan]

Anyone else have a workaround for this issue? Setting extractCss doesn't seem to work for me either... Angular CLI 6.1.5.

[oneal1801]

@Trojaan i fixed this issue with this
issue #13948
adding this line in the index
<script>document.write('<base href="' + document.location + '" />');</script>
angular/angular#13948

[Trojaan]

@oneal1801 Thanks! This fixed it! :)

[fedotxxl]

Very strange bug. My temporary solution:

moved all css files from angular.json to styles.scss using @import

[elvince]

Any update on this bug.
I face the same issue. I did the same workaround as fedotxxl but this is not the proper way and I receive depreciation warning:
"Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer."

Thanks for the feedback

[angular-automatic-lock-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.}