angular-cli: WARNING in '...' (Emitted Value instead of an instance of Error) postcss-url: foo/select.component.css can't read file 'bar.svg', ignoring

Versions

Angular CLI: 1.7.3
Node: 9.5.0
OS: darwin x64
Angular: 5.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.3
@angular/cli: 1.7.3
@angular/material: 5.2.3
@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
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

  • npm start
╰─ npm start

> prangular@0.0.0 start /Users/admin/code/prangular
> ng serve

** NG Live Development Server is listening on localhost:3200, open your browser on http://localhost:3200/ **
Date: 2018-03-18T22:07:30.793Z                                                - Hash: 8712ae5305fa8cf09699
Time: 13125ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 318 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 441 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 13.4 MB [initial] [rendered]
  • Note: the resources that are failing are located in assets/images/*.*

Observed behavior

WARNING in ./src/app/atoms/form-elements/select/select.component.css
(Emitted value instead of an instance of Error) postcss-url: /Users/admin/code/prangular/src/app/atoms/form-elements/select/select.component.css:30:3: Can't read file '/Users/admin/code/prangular/src/app/atoms/form-elements/select/assets/images/down-arrow.svg', ignoring

WARNING in ./src/app/molecules/main-navigation/main-navigation.component.css
(Emitted value instead of an instance of Error) postcss-url: /Users/admin/code/prangular/src/app/molecules/main-navigation/main-navigation.component.css:40:3: Can't read file '/Users/admin/code/prangular/src/app/molecules/main-navigation/assets/images/pgr_logo_white.png', ignoring

One of the referenced images:

.pgr-logo {
  background-image: url(assets/images/pgr_logo_white.png);
  width: 169px;
  height: 34px;
  margin-left: 24px;
}

Desired behavior

No warnings?

Mention any other details that might be useful (optional)

This seems to happen for any file where I reference a background image in css.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 7
  • Comments: 21 (2 by maintainers)

Most upvoted comments

Solution is to add ‘/’ to the beginning of the path: example: '/assets/images/bg-1.png' where assets is located in the root under src Folder https://github.com/angular/angular-cli/issues/4778

@Mozart-Alkhateeb your solution won’t work if you build with base-ref (meaning using a virtual path).

Why is this closed?

If your app is not hosted on root path /, you have to prefix your asset with assets/ instead of /assets - if your deploy-url isn’t the root path.

Solution with adding / prefix is very bad and will work only for some projects.

There should be option to provide source for postcss only

The modification of root relative paths in cases such as this is planned to be removed for 7.0. Also instead of making the path root relative with the /, another option is to prefix with a ^ which will prevent any processing of the url.

The issue should still be open. Like @ashraftm is stating, you can’t always just prefix a ‘/’ if you don’t know from what sub folder your app will be hosted

Same Issue here…