Ng build fails. CssSyntaxError since 1.7.0-rc.0

[elion]

Versions

Error occurs since v1.7.0-rc.0

Angular CLI: 1.7.0-rc.0
Node: 8.9.4
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.0-rc.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0-rc.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.6.2
webpack: 3.10.0

Observed behavior

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/assets/styles/page.css
(Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\{omitted}\angular-project\src\assets\styles\page.css:259:2159: Can't resolve '%23linearGradient-1' in 'C:\Users\{omitted}\angular-project\src\assets\styles'

> 259 |   background: transparent url("../img/icon.svg") no-repeat 50% 0;                                                                 ^
  260 | }

I get similar error messages for each svg file. The page.css is listed in angular-cli.json styles array.

Repro steps

ng build

Possible breaking commits: https://github.com/angular/angular-cli/commit/4a745c9 https://github.com/angular/angular-cli/commit/fa175d8

[FrancescoBorzi]

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.

[emxjay]

Same here with v1.7.0.

[wonkim00]

1.7 is broken. Reverting to 1.6.

[nidhididi]

@wonkim00 did that work for you?

[hcornelison]

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

[clydin]

This appears to be caused by an issue with the processing of the content of certain url encoded inlined svgs. Can someone experiencing this issue provide a minimal reproduction or an svg sample file that exhibits the problem?

[hcornelison]

@clydin I am unable to.

[wonkim00]

@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.

[nidhididi]

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

[alfaproject]

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

[zygimantas]

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

[smoke]

This is happening with SVG only.

[scandinave]

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

[embryologist]

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

[krilllind]

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

[FrancescoBorzi]

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

[charlesc32]

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.

[krilllind]

@smoke Would you please reopen this issue, as mentioned above, unquoted urls in css and sass are not working.

[MrJmpl3]

Same error , please reopen this issue

[FriendOfTheNight]

Same issue with 1.7.1

[clydin]

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.

[Polyterative]

Still having the issue with 1.7.2 My file:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('MaterialIcons-Regular.eot'); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url('MaterialIcons-Regular.woff2') format('woff2'),
    url('MaterialIcons-Regular.woff') format('woff'),
    url('MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

[krilllind]

@Polyterative Try targeting es5 in your ts file. It solved my problem, but it's not a long term solution.

[Polyterative]

Solved by calling containing folder Material_IconFont instead of Material IconFont. In my case the space was causing issues

[lenichols]

I'm having the same issue :-(

[krilllind]

@Polyterative Yea, you can not have any spaces in your url, especially if you have unquoted uses.

[Xiurik]

im having the same issue:

ERROR in ./src/app/cemex/cmx_dropdown/components/dropdown-item/cmx-dropdown-item.component.scss (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\irwin\Documents\Projectos\TestCEMEX\src\app\cemex\cmx_dropdown\assets\scss_font-icons.scss:15:8: Can't resolve './../fonts/dls-icons.svg' in 'C:\Users\irwin\Documents\Projectos\TestCEMEX\src\app\cemex\cmx_dropdown\components\dropdown-item'

the code i have is this

src: url('./../fonts/dls-icons.eot'); src: url('./../fonts/dls-icons.eot') format('embedded-opentype'), url('./../fonts/dls-icons.ttf') format('truetype'), url('./../fonts/dls-icons.woff') format('woff'), url('./../fonts/dls-icons.svg') format('svg');

[krilllind]

Try removing "-" in urls. If that does not solve the problem, we might still have an issue with svg.

[Xiurik]

I changed the name and then still problem.

**ERROR in ./src/app/cemex/cmx_dropdown/components/dropdown-item/cmx-dropdown-item.component.scss (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\irwin\Documents\Projectos\TestCEMEX\src\app\cemex\cmx_dropdown\assets\scss_font-icons.scss:12:7: Can't resolve './../fonts/icons.woff' in 'C:\Users\irwin\Documents\Projectos\TestCEMEX\src\app\cemex\cmx_dropdown\components\dropdown-item'

10 | 11 |

12 | src: url('./../fonts/icons.woff') format('woff');**

my code is

@font-face { font-family: 'dls-icons'; url('./../fonts/icons.woff') format('woff'); font-weight: normal; font-style: normal; }

[krilllind]

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.

[deksprime]

The problem I'm currently having looks much like this issue. Here's the output

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
Module build failed: Error: Can't resolve 'node_modules/font-awesome/css/font-awesome.css'

[Xiurik]

this one doesnt show anything: localhost:4000/webpack-dev-server

and did a downgrade to 1.7.0 and still having the problem.

IDK what you mean with this: The folder "fonts", is it included in angular-cli.json file as a static folder

where do i add this folder and how?? any example please??

[krilllind]

When running my serve you can view the output in the browser by navigating to localhost:4000/webpack-dev-server (or another port if you have changed it).

Yes, in the included angular-cli.json file, you can add the name of your folder in quotes to tell angular not to bundle these file (leave as is). More information about this can be found here https://github.com/angular/angular-cli/wiki/angular-cli

[krilllind]

If your case, you might have to add "fonts" To the apps -> assets array

[johnpapa]

Im getting this too, and I have no SVGs. Worked fine in 1.6.0. Not working in 1.7.3.

The error is misleading, as it says it cannot find a variable $primary which is indeed in my styles folder.

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/styles/styles.scss
Module build failed:
  $primary-color: map-get($primary, 400);
                         ^
      Undefined variable: "$primary".
      in /Users/papa/_git/ngrx-data-lab/src/styles/mixin.scss (line 8, column 27)

I created a new issue for this #9928

[ORIGINALUSRNM]

Is there an actual fix for this? Still not working for me with 1.7.3.

[kolexinfos]

Still getting this error in 1.7.3

ERROR in ./src/app/app.component.css (Emitted value instead of an instance of Error) CssSyntaxError: C:\Users\XXXXXX\Documents\WebStorm\Admin\src\assets\css\theme-default.css:771:26: Can't resolve '../img/logo-small.png' in 'C:\Users\SSSSSS\Documents\WebStorm\Admin\src\app'

[hccampos]

@johnpapa @kolexinfos @ORIGINALUSRNM Probably same as this: https://github.com/angular/angular-cli/issues/9943

You need to lock your node-sass

[kolexinfos]

My issue was not with node-sass was with the version of webpack that is in use at the time.

The @angular/cli@1.7.3 uses Webpack@3.11 which does not recognize.

I had to downgrade to @angular/cli@1.5.6 which uses @webpack@3.8 which built the project successfully.

[filipwiniarski]

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;
}

[jakubjosef]

I have similar issue with angular/cli 1.7.4 -

(Emitted value instead of an instance of Error) CssSyntaxError: /Users/xxx/xxx/website/web-src/app/pages/home-page/home-page.component.scss:104:30: Can't resolve ../../../../node_modules/assets/images/background.svg' in '/Users/xxx/xxx/website/web-src/app/pages/home-page
  102 |         }
  103 |         &.bg-1 {
> 104 |             background-image: url("~/assets/images/background.svg");
      |                              ^
  105 |         }
  106 |     }```

Can you point me to some fix? Version 1.6.3 works good, but i need some fix from 1.7 :(

[krilllind]

@jakubjosef Check what version of node-sass you are running, I bumped my version up from 4.8.1 to 4.8.3 and it solved my issue.

[clydin]

@jakubjosef if the file is a copied asset then the tilde should not be used. Otherwise the output will contain two copies of the file. If this is not the case then the path should be relative to the containing stylesheet's location.

The tilde should in general be avoided as it happens to work currently due to the underlying presence and configuration of webpack but is not guaranteed to work moving forward.

[MaciejWWojcik]

Do you guys have only the problem with svg? I have the same error as others using svg, png. Is there any workaround to this bug? I need 1.7.4 so I don't wont to go back to 1.6. @RandomUser0912421 - your's solution isn't working too - the same error

[jakubjosef]

@clydin Thanks for proposal, but it's not work. I still have node_modules in path :(

[MaciejWWojcik]

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"

[BobbyT]

has this been solved?

[pacozevallos]

They tried npm rebuild node-sass --force?

[jakubjosef]

@MaciejWWojcik yes, this is exactly the workaround i used. @pacozevallos yes, didn't help.

[suraj021]

Same issue with angular/cli 1.7.1