Angular CLI production build placing duplicates of all my fonts in the root of my dist directory. Can this be avoided?

Question

In my Angular project, i have custom fonts stored in src/assets/fonts/*

I reference these fonts in my styles.scss file like this:

@font-face {
    font-family: 'museo_sans_package';
    src: url('assets/fonts/MuseoSans_100-webfont.eot');
...

When doing a production build using the Angular CLI, my fonts directory along with all the font files in it are copied to my ./dist directory correctly:

./dist/assets/fonts/*

however all of my font files are also getting duplicated into the root of my /dist directory as well resulting in 2 copies of my fonts. One in ./dist/assets/fonts/* as expected, and also in ./dist/* which i do not want.

Is there a configuration i need to set somewhere to avoid this?

UPDATE: the fonts are copied to the ./dist/assets/fonts directory because the .angular-cli.json config is set to dup assets into the dist directory.

The duplication of my fonts into the root of .dist is being caused by either the sass compiler or the angular cli build process or both in that something is modifying the paths set in the urls for my @font-face rules, changing them to point to the root rather than the relative path assets/fonts/*

my current angular install:

@angular/cli: 1.1.0
node: 8.0.0
os: darwin x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.1.0
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

Answer 1

我想你会发现这个答案很有帮助。

Github Angular CLI 问题：Angular CLI 复制根目录中的资产

Answer 2

我遇到了同样的问题，并通过在字体 url 的开头添加一个斜杠来修复它，如下所示：

src: url('/assets/fonts/MuseoSans_100-webfont.eot');