2017-02-14 98 views
-1

我正在使用this回购。我想如何添加自定义字体?我在资产中创建了一个名为“字体”的文件夹,并且已将字体放在那里。Webpack添加字体

fonts.scss

@font-face { 
    font-family: 'Lato'; 
    src: url('../assets/font/Lato-Regular.eot'); 
    src: url('../assets/font/Lato-Regular.eot?#iefix') format('embedded-opentype'), 
    url('../assets/font/Lato-Regular.woff2') format('woff2'), 
    url('../assets/font/Lato-Regular.woff') format('woff'), 
    url('../assets/font/Lato-Regular.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

而且我已经加入配置字体,并将其添加到app.modules.ts。

import '../styles/fonts.scss'; 

我的问题,我应该添加什么代码的WebPack,使其工作。

+0

在你的webpack.config.js中加入这个test:/\.(eot|svg|ttf|woff|woff2)$/, loader:'file?name = public/fonts/[name]。[ ext]' } – MMK

+0

module:{loader:[] {test:/\.(eot|svg|ttf|woff|woff2)$/,loader:'file?name = public/fonts/[name]。[ext ]'}} – MMK

+0

它有道理吗? – MMK

回答

2

您正在加载相对于由webpack加载器&提取器创建的CSS文件的字体文件。我快速浏览了这个样板,它已经包含了sass loader。

{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: 'css-loader!sass-loader' 
    }), 
    include: [helpers.root('src', 'styles')] 
}, 

它应该工作,如果你有你的字体在正确的文件夹。