Angular '；CssSyntaxError'；-未能编译

说明

我们目前正在创建一个新的angular 5 ui库，但是当我尝试添加fonts.scss中包含的字体时，收到一个错误

我已经添加了package.json文件以获取信息，如果调试需要更多详细信息，请告诉我

字体.scss

@font-face {
 font-family: 'bree-thin';
 src: url('./fonts/bree-thin/bree-thin.eot');
 src: url('./fonts/bree-thin/bree-thin.woff2') format('woff2'),
 url('./fonts/bree-thin/bree-thin.woff') format('woff')
}
@font-face {
 font-family: 'Noto';
 src: url('./fonts/NotoSans-Regular.ttf');
 font-weight: normal;
 font-style: normal;}
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);

错误消息

Failed to compile.

./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
(Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:38:13: Can't resolve './fonts/bree-thin/bree-thin.eot' in 'C:\angular-library\dist'

终端-完整错误消息

Failed to compile.

./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
(Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:38:13: Can't resolve './fonts/bree-thin/bree-thin.eot' in 'C:\angular-library\dist'

./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！/dist/ui-lib.css）中的警告 [0]（发出的值而不是错误实例）postcss导入：C:\angular library\dist\ui lib.css:11:1:@import必须位于所有其他语句之前（除了@charset） [0] [0]警告位于./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！。/dist/ui lib.css） [0]（发出的值而不是错误实例）postcss url:C:\angular library\dist\ui lib.css:38:3:无法读取文件“C:\angular library\dist\fonts\bree thin\bree thin.eot”，忽略 [0] [0]警告位于./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！。/dist/ui lib.css） [0]（发出的值而不是错误实例）postcss url:C:\angular library\dist\ui lib.css:39:3:无法读取文件“C:\angular library\dist\fonts\bree thin\bree thin.woff”，忽略 [0] [0]警告位于./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！。/dist/ui lib.css） [0]（发出的值而不是错误实例）postcss url:C:\angular library\dist\ui lib.css:39:3:无法读取文件“C:\angular library\dist\fonts\bree thin\bree thin.woff2”，忽略 [0] [0]警告位于./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！。/dist/ui lib.css） [0]（发出的值而不是错误实例）postcss url:C:\angular library\dist\ui lib.css:43:3:无法读取文件“C:\angular library\dist\fonts\Nosans Regular.ttf”，忽略 [0] [0]在./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！。/dist/ui-lib.css）中出错 [0]（发出的值而不是错误实例）CssSyntaxError:C:\angular library\dist\ui lib.css:38:13:无法解析“C:\angular library\dist”中的“/fonts/bree thin/bree thin.eot” [0] [0]36 |@font-face{ [0]37 |字体系列：“bree thin”； [0]>38 | src:url（“./font/bree-thin/bree-thin.eot”）； [0] | ^ [0]39 | src:url（“./font/bree-thin/bree-thin.woff2”）格式（“woff2”），url（“./font/bree-thin/bree-thin.woff”）格式（“woff”）；] [0] 40 | [0] [0]在./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！。/dist/ui-lib.css）中出错 [0]（发出的值而不是错误实例）CssSyntaxError:C:\angular library\dist\ui lib.css:39:13:无法解析“C:\angular library\dist”中的“/fonts/bree thin/bree thin.woff” [0] [0]37 |字体系列：“bree thin”； [0]38 | src:url（“./font/bree-thin/bree-thin.eot”）； [0]>39 | src:url（“./font/bree-thin/bree-thin.woff2”）格式（“woff2”），url（“./font/bree-thin/bree-thin.woff”）格式（“woff”）；] [0] | ^ [0] 40 | [0]41 |@font-face{ [0] [0]在./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！。/dist/ui-lib.css）中出错 [0]（发出的值而不是错误实例）CssSyntaxError:C:\angular library\dist\ui lib.css:39:13:无法解析“C:\angular library\dist”中的“/fonts/bree thin/bree thin.woff2” [0] [0]37 |字体系列：“bree thin”； [0]38 | src:url（“./font/bree-thin/bree-thin.eot”）； [0]>39 | src:url（“./font/bree-thin/bree-thin.woff2”）格式（“woff2”），url（“./font/bree-thin/bree-thin.woff”）格式（“woff”）；] [0] | ^ [0] 40 | [0]41 |@font-face{ [0] [0]在./dist/ui-lib.css（./node\u modules/raw loader！。/node\u modules/postss loader/lib？？embedded！。/dist/ui-lib.css）中出错 [0]（发出的值而不是错误实例）CssSyntaxError:C:\angular library\dist\ui lib.css:43:13:无法解析“C:\angular library\dist”中的“/fonts/notosan Regular.ttf” [0] [0]41 |@font-face{ [0]42 |字体系列：“Noto”； [0]>43 | src:url（“./font/NotoSans Regular.ttf”）； [0] | ^ [0]44 |字体大小：正常； [0]45 |字体样式：普通；} [0]

---

[0]i｢wdm｣：编译失败。将所有字体文件放入资产文件夹，然后尝试从那里加载-

@font-face {
 font-family: 'bree-thin';
 src: url('/assets/fonts/bree-thin/bree-thin.eot');
 src: url('/assets/fonts/bree-thin/bree-thin.woff2') format('woff2'),
 url('/assets/fonts/bree-thin/bree-thin.woff') format('woff')
}
@font-face {
 font-family: 'Noto';
 src: url('/assets/fonts/NotoSans-Regular.ttf');
 font-weight: normal;
 font-style: normal;}
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);

---

我将字体添加到资产文件夹中，效果很好！谢谢@Pardeep Jain为什么需要将字体添加到此文件夹中？资产文件夹的意义是什么？我是否应该将其他文件添加到资产文件夹中？很高兴知道：）因为根据Angular，所有静态内容（如图像/字体/JSON/css文件）都应该在

asse中ts

文件夹和angular将尝试从那里获取数据，而不是“资产”文件夹，重要的是在

url（）中使用绝对路径

而不是相对路径。我们在项目的根目录下有一个未命名为

assets

的文件夹，它工作得很好。我做了一系列研究，发现当你用

/

或

开始路径时，它会抛出一个错误，因为
url（）
在这种情况下，希望它是从项目根目录开始的绝对路径。希望对我有帮助，这不起作用……我将它放在src/app/assets/font文件夹中，并将其引用到那里，但它不会接受。错误仍然存在，csssyntax error，与您的错误相同。您在这里有一个解释解决方案：