Search code examples
angularwebpackbackground-imageangular-cliangular-cli-v6

Angular CLI 6: background-image issue


Angular CLI 6.0.3 resolves sass code background-image: url(assert/folder1/x.png); as background-image: url(x.png); in css.

I have a lot of such places

...
background-image: url(assert/folder1/x.png);
...
background-image: url(assert/folder2/x.png);
...
background-image: url(assert/folder3/x.png);
...

But all these definitions become to be like

...
background-image: url(x.png);
...
background-image: url(x.png);
...
background-image: url(x.png);
...

It means that all classes have the same image...

How can I force Angular CLI to leave a path of an image?

UPD: the issue effects only for dev mode


Solution

  • The solution was to add "outputHashing" property with "media" value.

    /* angular.json */
    {
      ...
      "projects": {
         ...
         "your-project": {
            ...
            "architect": {
               ...
               "build": {
                 ...
                 "options": {
                    ...
                    "outputHashing": "media",
                    ...
                 }
               }
            }
         }
      }
    }