angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.73k stars 11.98k forks source link

[Angular10] Sass image references fail #18115

Closed spock123 closed 4 years ago

spock123 commented 4 years ago

🐞 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
alan-agius4 commented 4 years ago

Duplicate of #18013, #18041 and #18043

angular-automatic-lock-bot[bot] commented 4 years ago

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.