Angular-cli: [1.7.3] SCSS Index out of bounds - node-sass 4.8.x

[hccampos]

Versions

Angular CLI: 1.7.2
Node: 9.8.0
OS: linux x64
Angular: 5.2.8
@angular/cdk: 5.2.4
@angular/cli: 1.7.2
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.4.5
@angular-devkit/schematics: 0.4.5
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.4.5
typescript-json-schema: 0.21.0
typescript: 2.7.2
webpack: 3.11.0

Observed behavior

When building our app with Angular CLI 1.7.3, we get the following errors.

ERROR in ./apps/cloud/src/common-modules/uploader/drag-and-drop/drag-and-drop.component.scss
Module build failed: 
$palette-brown-800: nth($palette-brown, 9);
                   ^
      Index out of bounds for `nth($list, $n)`
      in /home/hcampos/pix4d/spa/node_modules/@angular-mdl/core/scss/mdl/_color-definitions.scss (line 541, column 21)
ERROR in ./apps/cloud/src/common-modules/map/gizmo/map-gizmo.component.scss
Module build failed: 
$palette-cyan-100: nth($palette-cyan, 2);
                  ^
      Index out of bounds for `nth($list, $n)`
      in /home/hcampos/pix4d/spa/node_modules/@angular-mdl/core/scss/mdl/_color-definitions.scss (line 256, column 20)

Desired behavior

The build should pass as in 1.7.2, since the SCSS code in the @angular-mdl lib seems to be correct.

Mention any other details that might be useful (optional)

The issue seems to be due to node-sass 4.8.x, which gets installed because @angular/cli requests ^4.7.1. We have pinned node-sass to 4.7.2 and everything seems to build normally.

[DanielSuperSonic]

Yesterday node-sass issued a new version (4.8.1) and angular-cli looks for 4.7.2 and higher minor versions.
Until Angular team will fix it, you can just add "node-sass": "4.7.2" to your package.json.
it worked for me

[hccampos]

@DanielSuperSonic yes, we have set it in our resolutions in package.json but decided to open the issue anyway so it can be tracked.

[kolexinfos]

This does not work for me.

[coffeetea-synchestra]

Doesn't work for me too

[kolexinfos]

The issue is @angular/[email protected] uses [email protected] which does not recognize the paths in the css in the screenshots above.

I had to downgrade to @angular/[email protected] which uses @[email protected] which built the project successfully.

[filipesilva]

Thanks for reporting this issue. This issue was originally reported a long time ago and since then we've had many releases, one of which might have addressed this problem. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

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