由于字体的 src 路径，Angular 构建在 Unix 系统中失败？答案

【问题标题】：Angular build fails in Unix systems because of src path for font-face?由于字体的 src 路径，Angular 构建在 Unix 系统中失败？
【发布时间】：2021-01-04 14:48:54
【问题描述】：

我在 styles.scss build 中有以下代码在我的 Windows 系统中运行良好，当我将代码部署到 devops repo 时，构建失败，因为它在 linux 机器上运行

@font-face {
   font-family: "opensans-regular";
   src: url(assets/fonts/OpenSans-Regular.ttf), url(assets/fonts/OpenSans-Regular.eot);
}

我得到以下错误

ERROR in ./src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /usr/src/app/src/styles.scss:14:12: Can't resolve 'assets/fonts/OpenSans-bold.ttf' in '/usr/src/app/src'

  12 | @font-face {
  13 |   font-family: "opensans-bold";
> 14 |   src: url(assets/fonts/OpenSans-bold.ttf), url(assets/fonts/OpenSans-bold.eot);
     |   

     ^

【问题讨论】：

尝试使用相对路径开始字体的 url，../ 或 ./ 并尝试在它们周围加上引号，这在这里总是很好的做法

标签： css angular scss-mixins

【解决方案1】：

此问题似乎与两种不同的字体有关，OpenSans-bold 和 OpenSans-Regular。

可能是外壳吗？我注意到粗体是小写但Regular首先是大写

【讨论】：

【解决方案2】：

这是因为您使用的相对路径assets/fonts/OpenSans-bold.ttf 在 linux 中无法解析。尝试使用来自/src/... 的绝对路径并检查它是否有效。由于错误 Can't resolve 'assets/fonts/OpenSans-bold.ttf' in '/usr/src/app/src' 显示它试图在此路径中找到assets/fonts/OpenSans-bold.ttf：'/usr/src/app/src'，但它不能。换个路径就OK了。

试试这样的：

src: url('/assets/fonts/OpenSans-bold.ttf') format('truetype');

@font-face {
  font-family: 'OpenSans-bold';
  src: url('/assets/fonts/OpenSans-bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  line-height: 1.5;
}

【讨论】：