【问题标题】:How to load local font in webpack angular-seed/universal如何在 webpack angular-seed/universal 中加载本地字体
【发布时间】:2025-11-30 06:10:01
【问题描述】:

我需要将本地字体加载到我的ng-seed/universal 中, 我只是这里的新手,我需要一些建议才能让它发挥作用。

我试图在我的webpack.config.js 上添加波纹管配置,但它似乎不起作用:)

module: {
            rules: [
                {
                    test: /\.(ttf|eot|woff|woff2)$/,
                    loader: 'file-loader',
                    options: {
                        name: 'fonts/[name].[ext]',
                    },
                }
            ]
        }

这是我在sass 文件中调用我的自定义字体的字体

@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 时,出现错误Error: Path variable [chunkhash] not implemented in this context: assets/CustomFont.[chunkhash].eot

谢谢。

【问题讨论】:

  • 您是否要为整个应用程序全局导入?
  • 是的,我确实想要全局导入字体:)

标签: angular webpack


【解决方案1】:

删除规则,如果您打算将此字体应用到整个应用程序,请将其放在 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;
}

*没有。 /资产之前

【讨论】:

  • 哇,它的工作,我不知道解决问题会那么简单,我几乎找了一个小时,我认为这是我的 webpack 设置的问题,你只是节省了我的一天谢谢....:)
  • 再次感谢,很抱歉我不能投票给你的答案,我没有足够的点数给你投票:)