我已经查看了几篇stackoverflow帖子和github问题,但找不到适合我的解决方案。
我有一个自定义字体,用于图标,并通过npm安装。这些是在
在我的主样式表中,我添加了如下内容:
我有一个自定义字体,用于图标,并通过npm安装。这些是在
node_modules
中的a-icons
文件夹中的文件:a-icon.css
a-icon.eot,
a-icon.ttf,
a-icon.woff,
a-icon.svg
在我的主样式表中,我添加了如下内容:
@import '~a-icons/a-icon';
@font-face {
font-family: 'a-icon';
src: url('../../../node_modules/a-icons/a-icon.eot');
src:
url('../../../node_modules/a-icons/a-icon.ttf') format('truetype'),
url('../../../node_modules/a-icons/a-icon.woff') format('woff'),
url('../../../node_modules/a-icons/a-icon.svg') format('svg');
}
@import '~a-icons/a-icon'
给我带来了一个错误,说找不到.eot, .ttf, .woff, .svg 等文件。
这是其中的一个错误:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss
Module not found: Error: Can't resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets/a-icon.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js doesn't exist
as directory
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
@ ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss 6:76081-76109
@ ./src/assets/stylesheets/global-styles.scss
@ multi ./src/assets/stylesheets/global-styles.scss ./node_modules/normalize.css/normalize.css
我正在使用scss,但字体是在普通的css中。
我还尝试过@import '../../../node_modules/a-icons/a-icon.css';
图标显示为方块,我认为这是因为字体系列未被识别。所以我添加了@font-face,但它没有起作用。
我还尝试将angular-cli.json更改为将其包含在资产和样式中:
"assets": [
"assets",
"assets/languages",
"assets/stylesheets",
"favicon.ico",
"environments/environment.values.js",
{
"glob": "a-icon.*",
"input": "../node_modules/a-icons",
"output": "./assets/a-icons"
}
"styles": [
"assets/stylesheets/global-styles.scss",
"../node_modules/normalize.css/normalize.css",
"../node_modules/a-icons/a-icon.css"
]
这个并没有任何作用。
@import "~a-icons/fonts.css";
或将其包含在 Angular CLI 配置的styles
下。 - Riva Madan