Is there an alternative for --rebaseRootRelativeCssUrls option in Angular CLI 8?

Question

I had a lot of issues because my application is hosted inside a subfolder and for that reason the relative /assets/ path, which is referenced inside .scss files, doesn't work. The solution was to enable the --rebaseRootRelativeCssUrls option to get the expected behaviour. With that option, the build process has adjusted my /assets/ paths by injecting the "--base-href" value and now the referenced images and fonts are loading correctly.

However, I see in the documentation that the option is deprecated and it will be removed in the next major release.

https://angular.io/cli/build (search for --rebaseRootRelativeCssUrls )

So my question is, what is the alternative, is there any other way to get the same result?

Answer 1

According to the release notes, the recommended method for transition is using relative URLs in your .scss files. This, to me, seems like a bad idea though. Here's a comment from the dev team on a bug logged about this issue.

https://github.com/angular/angular-cli/issues/14587#issuecomment-497368020

Answer 2

Inside your angular.json you can set multiple assetsfolder

   "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/the/other/folder/assets",
          "src/assets",
          {
            "glob": "**/*",
            "input": "src/the/other/folder/assets",
            "output": "./assets"
          },
        ],

this lets you have multiple assetsfolder.

Answer 3

I solved it by use path in this way:

background-image: url('../../../assets/images/icon.png');

Instead of this way:

background-image: url('/src/assets/images/img.png');

Answer 4

If your project is deployed in a subfolder you can pass that information to your build command

I suggest you to take a look at --base-href

In development, you typically start the server in the folder that holds index.html. That's the root folder and you'd add near the top of index.html because / is the root of the app.

But on the shared or production server, you might serve the app from a subfolder. For example, when the URL to load the app is something like mysite.com/my/app/, the subfolder is my/app/ and you should add to the server version of the index.html.

You can modify the production base href with the following command:

ng build --prod --base-href /subfolder/

You can also set base-href to ./ which means the current directory in opposite to / which stands for root directory.

Another possible solution would be to change href in your main index.html

<base href="./">