如何在webpack angular-seed / universal中加载本地字体

时间:2017-08-21 18:52:24

标签: angular webpack

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

我试图在我的webpack.config.js上添加bellow配置,但似乎无法正常工作:)

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

感谢。

1 个答案:

答案 0 :(得分: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;
}

*没有。之前/资产