I did a css -> scss migration on an existing Angular project using schematics-scss-migrate. Everything works fine except the URL’s, if any, in scss files. So I found out that in scss files the URL’s are resolved and hence at build time, angular should be able to find them. So we have two options:

1. Use a relative URL based on the root directory, like '/assets/images/myimage.png'
2. Use a relative URL based on the current path, like '../../assets/images/myimage.png' or '~src/assets/images/myimage.png'.

Now if use method 1. the assets are in the assets folder in the build output. But the problem is that this method will not work after deployment if I am serving from a subdirectory.

If I use method 2. the resources I’m referencing are copied to the root folder of build output and thus I end with duplicate files in both assets and root folder. Also since I am referencing a lot of files in this manner (mostly local font files), the root folder of build output does not look good. But the serving from subdirectory part works fine for this method.

I want a method which avoids the duplication, the resources should be served from assets folder only and the site should be able to be served from any subdirectory after deployment. Is there any simple way I can do this?

I read some solutions where I can just precede the URL with a ^ and then the build process will simply ignore this URL. But I don’t want to add this to every URL in every scss file and what if later this feature no longer works because it was mentioned that it’s not in official docs. So is there a simple way to tell Angular to ignore these asset URL’s in scss files and not resolve them.

Also I noticed that when I create a new project and there give a relative URL in some scss file, after build the referenced resource is duplicated, but into a separate media directory in the build output. For my project no media directory is generated and directly to root folder resources are copied. Same angular cli is used in both projects.