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"
  }
}

[FrancescoBorzi]

Confirmed in Angular 9.

Switching "extractCss" to false solves the issue for me.

Angular CLI: 9.1.0
Node: 12.14.0
OS: linux x64

Angular: 9.1.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.901.0
@angular-devkit/build-angular   0.901.0
@angular-devkit/core            9.1.0
@angular-devkit/schematics      9.1.0
@angular/cdk                    9.2.0
@angular/cli                    9.1.0
@angular/material               9.2.0
@angular/pwa                    0.901.0
@schematics/angular             9.1.0
@schematics/update              0.901.0
rxjs                            6.5.5
typescript                      3.8.3

[alan-agius4]

Hi all,

Apologies for the delay in addressing this.

The fix will be part of the the next patch release (9.1.2).

[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.}