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

[mearleycf]

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

> [email protected] 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.

[Mozart-Alkhateeb]

Same Issue here...

[Mozart-Alkhateeb]

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
#4778

[mearleycf]

That worked!

[ashraftm]

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

[rahulyadav-walkingtree]

Solution is to add '/' to the beginning of the path:
This solution will give the error when you will build the app.

[Hojou]

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

[clydin]

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.

[Hojou]

@clydin prefixing with a ^ seems to have no other effect than changing the actual path to include the ^ symbol (%5E)

[Hojou]

Seems like the latest angular cli (v6) is not passing the base-href to the postcss, making postcss mess up the paths.

I can't prefix my urls with / or with ../ since both will mess up the path. The path needs to be relative since i have a base-href for my solution. The angular CLI already reads the base-href and uses it for parsing assets, everywhere except passing it to postcss.

Any paths inside .scss files will eventually work once the solution hits production, but in non prod builds, postcss will output errors/warnings since it does not know about the base-href

[Danielapariona]

I have the same error, it does not show me the images when compiling my application. :( when I use "../../ .." or "./ .." Any help?

[caioCDDC]

@Danielapariona virtual path won't work when you build your app, try '/[path]/img.png'

[lkostrowski]

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

[amodolo]

Any news?

[chendachao]

I encountered the same issue in stage env and finally found that's because I forgot to commit the image file.

Resolved it by committing the image file to git repo. Hope this can help others.

[middtownperspectives]

Same issue when importing font files from a node_module. Any input here?

[ParasShahh]

Any update ?

[lkostrowski]

I think a new issue should be opened

[mwroffo]

Agreed, this should be reopened.

[hakhan88]

Please reopen since no solution has been suggested. Thanks

[clydin]

The original issue was against version 1.7.3 which is no longer supported. If you are encountering similar issues with a supported (or latest) version of the CLI, please open a new issue. Please ensure that all the requested information from the issue template is provided so that the team can properly assist you.

[angular-automatic-lock-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.}