Inclusion order of CSS is not guaranteed for global styling with "scss" format?

[RGTGT]

Bug Report or Feature Request (mark with an x)

- [ x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.2.7
node: 6.11.2
os: win32 x64
@angular/animations: 4.3.3
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.2.7
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3

Repro steps.

• Create angularcli project using scss as styling option.

• Create a css file containing
  body { font-size: 120px; }

• Include the previously created css file in styles.scss through @import

• Import bootstrap CDN in styles through
  @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
  Ensure the inclusion of bootstrap is the last inclusion of styles.scss

• Launch
  ng serve
  and
  ng serve -ec -sm --port 3000

• Visit localhost:4200 & localhost:3000 to see that CSS are not included in an order between the two instances.

(see: sample repository for more infos)

The log given by the failure.

N/A

Desired functionality.

It would be nice to have a garantee about the order of inclusion when importing external CSS through styles.scss. I didn't find much documentation about this aspect. So if it's not a bug I think it would be great if these kind or behavior were documented.

Mention any other details that might be useful.

sample repository

[filipesilva]

Heya, I tried using your repository but instead of serving, I just built it instead.

The original src/styles.scss contains;

/* You can add global styles to this file, and also import other style files */
@import 'assets/p.css';
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
//@import "assets/bootstrap/css/bootstrap.min.css";

In dist/styles.bundle.css this is the generated content:

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);body {
  font-size: 120px;
}

It looks like the order is indeed reverse. I don't think this is intended.

[dgsqrs]

This bug is now visible in my projects since release 1.6.4 (but not in 1.7.0-beta.1)

The workaround I found is
Remove all but styles.scss in the .angular-cli.json
Add the 'external' dependencies at the end of styles.scss
`
@import "assets/styles/style";
@import "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css";
@import '../node_modules/angular2-toaster/toaster';

@import "../node_modules/bootstrap/dist/css/bootstrap.css";
@import "../node_modules/font-awesome/css/font-awesome.css";
@import "../node_modules/animate.css/animate.min.css";
@import "../node_modules/angular2-toaster/toaster.css";`

now the imports are done in the right order

[mgechev]

Can you still reproduce the issue?

[mgechev]

Closing the issue due to inactivity. If the problem still exists in the latest version of the CLI, please open a new issue following the template and providing a minimal demo where we can reproduce it. Thanks! :-)