Disable URL checks in CSS in angular application (ng build). Like in libraries (ng build some-lib)

Question

I created an Angular application using ng new my-application command. Also I created a library in this application using ng generate library my-lib.

Here is a simple CSS code with background-image property. The image file does not exist

.class1 {
  background-image: url('./not-existing-file.png');
}

If I put this CSS code in the library projects/my-lib/src/lib/my-lib.component.scss and run ng build my-lib then the library will build successfully.

But if I put this CSS code in the src folder src/app/app.component.scss and run ng build then I get error:

NonErrorEmittedError: (Emitted value instead of an instance of Error) CssSyntaxError: C:\app.component.scss:2:2: Can't resolve '../not-existing-file.png' in 'C:\angular-tour-of-heroes\src\app'

I need to disable URL checks in CSS in ng build command, like in ng build my-lib. Is it possible?

deepakchethan · Accepted Answer · 2021-06-07 13:48:15Z

1

You need to disable url(...) processing in your css-loader plugin (which again requires using an external web pack config). Basically do the following in your web-pack config.

{loader: 'css-loader', options: {url: false}}

But I suggest inlining the images in your library only. That way during compilation your image path would be replaced with data uris. You just have to set "cssUrl": "inline" in your libraries ng-package.json to make this working.

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "cssUrl": "inline",
  }
}

edited Jun 7, 2021 at 13:48

answered Jun 7, 2021 at 3:12

deepakchethan

5,6401 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Disable URL checks in CSS in angular application (ng build). Like in libraries (ng build some-lib)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related