Angular-cli: Error in styles in ng serve in Angular 1.7.1

Created on 25 Feb 2018 · 9Comments · Source: angular/angular-cli

Versions

Angular CLI: 1.7.1
Node: 8.9.4
OS: win32 x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cdk: 5.2.2
@angular/cli: 1.7.1
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

ng serve

Observed behavior

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/styles.scss
(Emitted value instead of an instance of Error) CssSyntaxError: D:\_JOSE\PROYECTOS-JAVASCRIPT\PROJECT-RANDOM\src\assets\plugins\roboto\roboto.min.css:9:6787: Can't resolve 'assets/plugins/roboto/fonts/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2)%20format(%27woff2%27' in 'D:\_JOSE\PROYECTOS-JAVASCRIPT\PROJECT\src'

Desired behavior

In Angular Cli 1.6.8 works but in 1.7.0+ crash

Mention any other details that might be useful (optional)

Source

MrJmpl3

👍6

Most helpful comment

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/sass/styles.scss
(Emitted value instead of an instance of Error) CssSyntaxError: /home/carlos/Escritorio/a/node_modules/flag-icon-css/sass/_flag-icon-base.scss:25:24: Can't resolve '../../node_modules/flag-icon-css/flags~flag-icon-css/flags/1x1/zw.svg' in '/home/carlos/Escritorio/a/src/sass'

23 | background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
24 | &.flag-icon-squared {

25 | background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
| ^
26 | }
27 | }

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/sass/styles.scss
(Emitted value instead of an instance of Error) CssSyntaxError: /home/carlos/Escritorio/a/src/sass/base/_icons.scss:10:20: Can't resolve './~/assets/img/padlock.svg' in '/home/carlos/Escritorio/a/src/sass'

8 | }
9 | .login-password {

10 | background-image: url('./~/assets/img/padlock.svg') !important;
| ^
11 | background-repeat: no-repeat;
12 | padding-left: 30px !important;

ceaguilera on 19 Mar 2018

👍2

All 9 comments

Thanks for reporting this issue. However, this issue is a duplicate of an existing issue https://github.com/angular/angular-cli/issues/9642. Please subscribe to that issue for future updates.

filipesilva on 26 Feb 2018

Fixed in version 1.7.2!

MrJmpl3 on 1 Mar 2018

👎7

Helpme ng server with angular-cli 1.7.2

ceaguilera on 19 Mar 2018

23 | background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
24 | &.flag-icon-squared {

25 | background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
| ^
26 | }
27 | }

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/sass/styles.scss
(Emitted value instead of an instance of Error) CssSyntaxError: /home/carlos/Escritorio/a/src/sass/base/_icons.scss:10:20: Can't resolve './~/assets/img/padlock.svg' in '/home/carlos/Escritorio/a/src/sass'

8 | }
9 | .login-password {

10 | background-image: url('./~/assets/img/padlock.svg') !important;
| ^
11 | background-repeat: no-repeat;
12 | padding-left: 30px !important;

ceaguilera on 19 Mar 2018

👍2

@ceaguilera have you fixed it?

coffeetea-synchestra on 23 Mar 2018

@coffeetea-synchestra no! :(

ceaguilera on 24 Mar 2018

check paths

$flag-icon-css-path: '~flag-icon-css/flags' !default;
$flag-icon-rect-path: '/4x3' !default;
$flag-icon-square-path: '/1x1' !default;
@import '~flag-icon-css/sass/flag-icon';