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/core@0.0.29 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?