Skip to content

[Angular10] Sass image references fail #18115

Closed
@spock123

Description

@spock123

🐞 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions