Repository navigation
ng build duplicates images/fonts that are used in scss files #4669
Description
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"
}
}
],
Activity
filipesilva commentedon Mar 9, 2017
So what's happening is this:
assetsis copied as isThis 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 commentedon Apr 30, 2017
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 commentedon May 18, 2017
@otecfuras Just remove the
'asstes'string reference from the assets object and it wont copy it, but only the hashed fonts onceyosigolan commentedon Mar 27, 2018
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 commentedon Apr 5, 2018
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 commentedon Apr 8, 2018
@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 commentedon Sep 8, 2019
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.