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)
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 withassets/
instead of/assets
- if yourdeploy-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…