Angular CLI 生产构建将所有字体的副本放置在 dist 目录的根目录中。这可以避免吗？

Question

在我的 Angular 项目中，我将自定义字体存储在 src/assets/fonts/* 中

我在 styles.scss 文件中引用这些字体，如下所示：

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

使用 Angular CLI 进行生产构建时，我的字体目录及其中的所有字体文件都会正确复制到我的 ./dist 目录中：

./dist/assets/fonts/*

然而，我的所有字体文件也被复制到我的 /dist 目录的根目录中，并导致我的字体有 2 个副本。正如预期的那样，一个在 ./dist/assets/font/* 中，另一个在我不想要的 ./dist/* 中。

我需要在某处设置配置来避免这种情况吗？

更新：字体被复制到 ./dist/assets/fonts 目录，因为 .angular-cli.json 配置设置为将资产复制到 dist 目录中。

我的字体重复到 .dist 的根目录是由 sass 编译器或 Angular cli 构建过程或两者造成的，因为某些东西正在修改我的 @font-face 规则的 url 中设置的路径，将它们更改为指向根而不是相对路径 asset/fonts/*

我当前的角度安装：

@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

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

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

Answer 2

老实说，在花了很多时间之后，我最终将所有

@font-face

放在了我的 index.html 中的

<style>

标签中，路径类似于

src:url("assets/fonts/myFont.woff2")

。然后字体不再重复，它们被放置在我的“fonts”文件夹中，并且我不再有 404 错误。

简而言之，我的后端有一个基于资产的过滤器，我无法将字体留在根文件夹中。我也不想设置自定义 webpack 配置。我相信有些人可能有相同的配置，这就是我把它放在这里的原因。

Answer 3

我知道这是一篇很老的帖子，但我也一直在努力解决这个问题。我发现这个解决方案非常适合我：

dist/root 中的第三方 css 字体

我所做的主要更改是更改斜杠之前的点，使 URL 成为绝对路径

@font-face {
font-family: "Montserrat-Light";
/*it was like this before*/
/*src: local("Montserrat-Light"), url(./assets/fonts/Montserrat/Montserrat-Light.ttf) format("truetype");*/
src: local("Montserrat-Light"), url(/assets/fonts/Montserrat/Montserrat-Light.ttf) format("truetype");}

注意 / 表示当前驱动器的根目录。

您还有 ./ 表示当前目录。

../ 表示当前目录的父目录。

并在

Angular.json

文件中添加我的字体文件：

"assets": ["src/favicon.ico",
           "src/assets",
           "src/assets/fonts"
          ],