angular-cli do not bundle the style files in order when using AOT

Question

in my .angular-cli.json, the styles property like this:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "adminlte.css",
    "../node_modules/admin-lte/dist/css/skins/skin-yellow-light.min.css"
  ],

I expect these files will bundle in that order, but I got the styles.bundle.css like this:

AdminLTE ...... styles ...... skin-yellow-light ...... bootstrap ......

This lead to my project's style are different from dev mode after I build it. So I wonder why.

Answer 1

I solved this problem by @import all the style files into styles.css, so my angular-cli.json:

"styles": [
    "styles.css"
]

and styles.css:

/* import other style files */
@import "./styles/bootstrap.min.css";
@import './styles/adminlte.css';
@import './styles/skin-yellow-light.min.css';

/* some global styles */