angular-cli: Ng build fails. CssSyntaxError since 1.7.0-rc.0

This is happening with SVG only.

1.7.1 is solving the issue for me, thanks a lot @clydin

1.7.1 did not fix the issue for me. I had to roll back to 1.6.0. I’m seeing the error on unquoted urls for fonts.

Warning: the path it´s not relative to the partial .scss file

For many people the error will be caused when trying to load a resource relative to the file. What Webpack is doing is trying to resolve the paths relative to the entry file.

You can put the SVGs or webfonts inside the assets folder and update the path accordingly.

Same issue as @embryologist Referring to files via css url() without “” causes the build to crash. This should work, as it has a different meaning when using for example sass.

Can confirm that it’s not working in 1.7.1

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: /Users/json/OneDrive/MyProjects/ArtNgCore/node_modules/material-design-icons/iconfont/material-icons.css:10:12: Can’t resolve ‘…/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf)%20format(%27truetype%27’ in ‘/Users/json/OneDrive/MyProjects/ArtNgCore/src’

8 | url(MaterialIcons-Regular.woff2) format(‘woff2’), 9 | url(MaterialIcons-Regular.woff) format(‘woff’),

10 | url(MaterialIcons-Regular.ttf) format(‘truetype’); | ^ 11 | } 12 |

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: /Users/json/OneDrive/MyProjects/ArtNgCore/node_modules/material-design-icons/iconfont/material-icons.css:8:12: Can’t resolve ‘…/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2)%20format(%27woff2%27’ in ‘/Users/json/OneDrive/MyProjects/ArtNgCore/src’

6 | src: local(‘Material Icons’), 7 | local(‘MaterialIcons-Regular’),

8 | url(MaterialIcons-Regular.woff2) format(‘woff2’), | ^ 9 | url(MaterialIcons-Regular.woff) format(‘woff’), 10 | url(MaterialIcons-Regular.ttf) format(‘truetype’);

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: /Users/json/OneDrive/MyProjects/ArtNgCore/node_modules/material-design-icons/iconfont/material-icons.css:9:12: Can’t resolve ‘…/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff)%20format(%27woff%27’ in ‘/Users/json/OneDrive/MyProjects/ArtNgCore/src’

7 | local(‘MaterialIcons-Regular’), 8 | url(MaterialIcons-Regular.woff2) format(‘woff2’),

9 | url(MaterialIcons-Regular.woff) format(‘woff’), | ^ 10 | url(MaterialIcons-Regular.ttf) format(‘truetype’); 11 | }

Same here with v1.7.0.

I can confirm this bug. I have exactly the same issue.

For me it appeared as soon as I updated to version 1.7, the issue was not in 1.6.

Happen with src: local('Material Icons'), local('MaterialIcons-Regular'), url(../../assets/fonts/material-icon.woff2) format('woff2'); too with v 1.7.1

Ok. Just wrap url content inside “”, fix the problem

I am getting the same error with single svg background url.

Guys, Did you try to specify path in this way? For me it’s working fine.

$icon: url("/../../../../../assets/local_florist.png");
.icon {
  background: $icon;
}

"@angular/cli": "^1.7.3"

For everyone still having issues with unquoted url functions, a fix has been merged in master (#9738) and will be available in 1.7.2 which will be released this week.

@wonkim00 thank you, I also had success with cli 1.6.8

@nidhididi Yes. After deleting the node_modules folder, editing to “@angular/cli”: “~1.6.0” in package.json, and running npm install again (which pulled cli 1.6.8), ng build ran successfully.

Same, 1.7.0 caused failing builds, pinned version to 1.6.0, builds are passing again.

I’m on @angular/cli 1.7.4 and I’ve had the same issue while I was trying to load fonts.

I fixed the problem by assigning url value to scss variable, hope it helps!

$font_src-bold: url("./assets/fonts/SF-UI-Display-Bold.otf");

@font-face {
    font-family: "SF Pro Display";
    font-weight: 700;
    src: $font_src-bold;
}

The folder “fonts”, is it included in angular-cli.json file as a static folder?

You can navigate to localhost:4000/webpack-dev-server to see if your targeting folder was correctly emitted and if your given don’t url points to that folder.

I’m having the same issue and it’s something to do with the postcss-cli-resources plugin. Apparently, it doesn’t quite support background properties with multiple backgrounds, if the last one is not a URL.

Example:

b {
  background:
    url('./assets/icons/columns.svg'),
    linear-gradient(to top, #0f322c 84%, #071a16 99%);
}

Will get compiled to:

b {
  background: url('columns.<hash>.svg');
}

@clydin this is the commit that caused my regression (and possibly the others in this thread): https://github.com/angular/angular-cli/commit/eb102275bdd1a05369ff2d1c588ee4040ef0c45d

@wonkim00 did that work for you?

1.7 is broken. Reverting to 1.6.