ng build duplicates images/fonts that are used in scss files

[HellMaX]

OS?

Windows 10

Versions.

@angular/cli: 1.0.0-beta.31
node: 6.9.1
os: win32 x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7

Issue description.

I have an assets folder which contains all my images/fonts. And I have some scss files that are using these images/fonts.
The thing is that when I run "ng build" my images/fonts are duplicated in the dist folder. Some are in the assets folder like declared in the angular-cli.json and the same are duplicated in the root dist folder.

---src
---|---app
---|---assets
---|---|---images
---|---|---fonts
---|---environments
---|---style ---> all scss files

"apps": [
{
"root": "src",
"outDir": "ng-dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"style/main.scss"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],

[filipesilva]

So what's happening is this:

• everything in assets is copied as is
• every relative path in stylesheets is copied as well

This is actually intended. It just so happened you put those files in a folder that also copies them wholesale.

If you just reference them from the css, you don't need to put them in assets.

It's also worth mentioning that resources in stylesheets will also be fingerprinted, which is a good thing.

[otecfuras]

If you just reference them from the css, you don't need to put them in assets.

Ok, but where do I have to put them if I don't want them to be duplicated ? I thought assets folder is a good place for assets, even if they're referenced through relative paths from components' css deep in src folder structure.

[Avien]

@otecfuras Just remove the 'asstes' string reference from the assets object and it wont copy it, but only the hashed fonts once

"assets": [
        "favicon.ico"
      ],

[yosigolan]

Hey @filipesilva
so what is your recommendation, to use relative path in css or not? can you explain the benefits of your recommended way? i couldn't find any info regarding the best practice it...

Thanks

[X3QTO]

I tried this approach but the problem is there are other images which are referenced dynamically in code.
How do we prevent duplicates? and I want all the images to remain in the assets folder. How can I stop this? Do I need to write my on post build scripts to do this?

[yosigolan]

@X3QTO in order to leave the images in the assest folder refernce them like this:
url(../../../../assets/images/add-icon-green.svg)

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