Scss not emitted properly (very strange!)

[sinedied]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.2.0
node: 7.9.0
os: darwin x64
@angular/animations: 4.2.5
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.6
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.5
@angular/language-service: 4.2.5

Repro steps.

1. Check out this repo: https://github.com/ngx-rocket/starter-kit/tree/angular-cli-scss-issue
2. npm install
3. npm start

Uncomment lines: https://github.com/ngx-rocket/starter-kit/blob/mobile/ionic-routing/src/app/login/login.component.scss#L16-L19

=> no matching CSS is emitted! I have even tried changing the selection with more specification, adding !important etc. The element with is present in the page with the right class, it's the caret here:

The log given by the failure.

The build seems fine, so no errors displayed

Desired functionality.

CSS is emitted as expected

Mention any other details that might be useful.

Repo: https://github.com/ngx-rocket/starter-kit/tree/angular-cli-scss-issue

Strange bonus (might be related):

• If if change the formatting of these lines: https://github.com/ngx-rocket/starter-kit/blob/angular-cli-scss-issue/src/app/login/login.component.scss#L12-L14
  to

.item-select .label-md,
.login-header,
.login-background {
  color: color-contrast($colors, primary);
}

(basically change each selector to its own line) and add other selectors, it sometimes fails the build...

[filipesilva]

I tried running your repro but it does not build

git clone https://github.com/ngx-rocket/starter-kit
cd starter-kit
git checkout angular-cli-scss-issue
npm i
npm run build

Hash: 1f755c32a47517ef4417
Time: 29554ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 235 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 251 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 549 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.72 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

WARNING in ./~/ionic-angular/util/ng-module-loader.js
54:11-36 Critical dependency: the request of a dependency is an expression

WARNING in ./~/ionic-angular/util/ng-module-loader.js
69:11-36 Critical dependency: the request of a dependency is an expression

ERROR in D:/sandbox/starter-kit/node_modules/rxjs/Subject.d.ts (16,22): Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'Observable<T>' is not assignable to type 'Observable<R>'.
        Type 'T' is not assignable to type 'R'.

ERROR in D:/sandbox/starter-kit/src/app/app.component.ts (99,9): Type 'string | Type<any>' is not assignable to type 'Component'.
  Type 'string' has no properties in common with type 'Component'.

ERROR in D:/sandbox/starter-kit/src/app/core/http/http.service.ts (121,7): Type 'Observable<{} | Response>' is not assignable to type 'Observable<Response>'.
  Type '{} | Response' is not assignable to type 'Response'.
    Type '{}' is not assignable to type 'Response'.
      Property 'type' is missing in type '{}'.

ERROR in D:/sandbox/starter-kit/src/app/core/shell/shell.component.ts (115,7): Type 'string | Type<any>' is not assignable to type 'Component'.
  Type 'string' has no properties in common with type 'Component'.

ERROR in D:/sandbox/starter-kit/src/app/app.component.ts (99,9): Type 'string | Type<any>' is not assignable to type 'Component'.
  Type 'string' has no properties in common with type 'Component'.

ERROR in D:/sandbox/starter-kit/src/app/core/http/http.service.ts (121,7): Type 'Observable<{} | Response>' is not assignable to type 'Observable<Response>'.
  Type '{} | Response' is not assignable to type 'Response'.
    Type '{}' is not assignable to type 'Response'.
      Property 'type' is missing in type '{}'.

ERROR in D:/sandbox/starter-kit/src/app/core/shell/shell.component.ts (115,7): Type 'string | Type<any>' is not assignable to type 'Component'.
  Type 'string' has no properties in common with type 'Component'.

I know your repro said to use npm start, but if it's not possible to build I have to assume there are errors in your setup that can cause all kinds of problems.

If you provide a repro that can be built I can check again.

[sinedied]

Strange, these issues should only occurs with [email protected] and the package.json should ask for [email protected]. I typed the exact same commands as you with [email protected] and [email protected] and no error occured.

Anyway, my bad I forgot this issue but I found the underlying reason for the CSS not being emitted: I used ionic components, and the element I was trying to target with CSS was generated inside a ionic component, so I needed to add the /deep/ selector to make it work.
This issue can then be closed, sorry for the trouble.

As a side note though, while /deep/ is working fine with scss and angular-cli, its equivalent >>> does not, but that's another story 😉

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