如何在 webpack angular-seed/universal 中加载本地字体 [英] How to load local font in webpack angular-seed/universal
问题描述
我需要将本地字体加载到我的ng-seed/universal一>,我只是这里的新手,我需要一些建议才能让它发挥作用.
I have case that I need to load local font into my ng-seed/universal, I'm just newbie here and I need some suggestion to make it work.
我试图在我的 webpack.config.js
上添加波纹管配置,但它似乎不起作用:)
I have tried to add bellow config on my webpack.config.js
, but it seems to be not working :)
module: {
rules: [
{
test: /\.(ttf|eot|woff|woff2)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
}
]
}
这是我的 sass
文件中的字体,它调用了我的自定义字体
And here is my font face in my sass
file that called to my custom font
@font-face {
font-family: 'CustomFont';
src: url('./assets/fonts/CustomFont.eot');
src: url('./assets/fonts/CustomFont.eot?#iefix') format('embedded-opentype'),
url('./assets/fonts/CustomFont.woff') format('woff'),
url('./assets/fonts/CustomFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
当我在开发模式下点击 npm run
时出现错误 错误:路径变量 [chunkhash] 未在此上下文中实现:assets/CustomFont.[chunkhash].eot
.
When I hit npm run
on dev mode I got an error Error: Path variable [chunkhash] not implemented in this context: assets/CustomFont.[chunkhash].eot
.
谢谢.
推荐答案
删除规则,如果您打算将此字体应用于整个应用程序,请将其放入 style.css
Remove the rule and if you are intending to apply this font to the whole app, put this inside styles.css
@font-face {
font-family: 'CustomFont';
src: url('/assets/fonts/CustomFont.eot');
src: url('/assets/fonts/CustomFont.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/CustomFont.woff') format('woff'),
url('/assets/fonts/CustomFont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
*没有.之前/assets
*no. before /assets
这篇关于如何在 webpack angular-seed/universal 中加载本地字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!