Error using function URL('../') in scss file

[llutti]

🐞 bug report

In my project we have same custom scss files organized in folders. All works fine in Angular 9, but when I try to update to Angular 10.

🔬 Minimal Reproduction

Here I create the example project to demonstrate the error https://github.com/llutti/test-angular-v10-scss-error

https://angular-10-error.stackblitz.io

🔥 Exception or Error

C:\py\teste-v10-erro-scss>ng build

chunk {main} main.js, main.js.map (main) 8.04 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.07 MB [initial] [rendered]
Date: 2020-07-16T18:29:38.580Z - Hash: ae1cdee9299f4664ef0a - Time: 8603ms

ERROR in ./src/scss/customStyles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/scss/customStyles.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:\py\teste-v10-erro-scss\components\_header.scss:8:4: Can't resolve './assets/images/logo.png' in 'C:\py\teste-v10-erro-scss\src\scss'

   6 |     height: 100px;
   7 |
>  8 |     background-image: url('../assets/images/logo.png');
     |    ^
   9 |   }
  10 |

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.3
Node: 14.4.0
OS: win32 x64

Angular: 10.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.3
@angular-devkit/build-angular     0.1000.3
@angular-devkit/build-optimizer   0.1000.3
@angular-devkit/build-webpack     0.1000.3
@angular-devkit/core              10.0.3
@angular-devkit/schematics        10.0.3
@angular/cli                      10.0.3
@ngtools/webpack                  10.0.3
@schematics/angular               10.0.3
@schematics/update                0.1000.3
rxjs                              6.6.0
typescript                        3.9.6
webpack                           4.43.0

[JoostK]

Please see #18115, #18013, #18041 and #18043 for details and steps to resolve the issue.

[clydin]

In this particular case, the url in here should most likely be ../../assets/images/logo.png. However, as mentioned in some of the referenced issues, it is not recommended to put files that are referenced from a stylesheet within configured asset locations. This will result in two copies of the file. Assets are generally recommended for files that will not be otherwise processed by the build system.

[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.}