Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Angular10] Sass image references fail #18115

Closed
spock123 opened this issue Jul 2, 2020 · 2 comments
Closed

[Angular10] Sass image references fail #18115

spock123 opened this issue Jul 2, 2020 · 2 comments

Comments

@spock123
Copy link

spock123 commented Jul 2, 2020

🐞 bug report

Affected Package

I think it's either the Angular compiler or Webpack plugin that handles Sass

Is this a regression?

Yes, works in NG9

Description

We use base href in our apps, and reference images in SCSS like this (example):

background-image: url("assets/images/bridge22-large.webp")

In this case, this means that if for example the base href is /en, the url will become /en/assets/images/...

A clear and concise description of the problem...

Errors thrown during both development and production build

🔥 Exception or Error



 &.background-26 {background-image: url("assets/images/bridge26-large.webp")}

ERROR in ./src/app/modules/lazy-shared/components/page-header/page-header.scss
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/lrj/project/Selfservice/page-header.scss:285:27: Can't resolve './assets/images/bridge25-large.webp' in '/Users/lrj/project/Selfservice/src/app/modules/lazy-shared/components/page-header'

🌍 Your Environment

Angular Version:


Angular CLI: 10.0.1
Node: 12.13.1
OS: darwin x64

Angular: 10.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.1
@angular-devkit/build-angular      0.1000.1
@angular-devkit/build-optimizer    0.1000.1
@angular-devkit/build-webpack      0.1000.1
@angular-devkit/core               10.0.1
@angular-devkit/schematics         10.0.1
@angular/cdk                       10.0.0
@angular/cli                       10.0.1
@angular/fire                      6.0.2
@angular/material                  10.0.0
@angular/material-moment-adapter   10.0.0
@ngtools/webpack                   10.0.1
@schematics/angular                10.0.0
@schematics/update                 0.1000.1
rxjs                               6.5.5
typescript                         3.9.5
webpack                            4.43.0
@JoostK JoostK transferred this issue from angular/angular Jul 2, 2020
@alan-agius4
Copy link
Collaborator

Duplicate of #18013, #18041 and #18043

@alan-agius4 alan-agius4 marked this as a duplicate of #18013 Jul 2, 2020
@alan-agius4 alan-agius4 marked this as a duplicate of #18041 Jul 2, 2020
@alan-agius4 alan-agius4 marked this as a duplicate of #18043 Jul 2, 2020
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 2, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants