2017-02-14 25 views
-1

私はthisリポジトリを使用しています。どのようにカスタムフォントを追加すると思いますか?私は資産の中に "フォント"と呼ばれるフォルダを作っており、そこにフォントを置いています。Webpackフォントを追加

@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; 
} 

fonts.scss

はまた、私はフォントの設定を追加し、app.modules.tsに追加しています。

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

私はそれを動作させるためにどのようなコードを追加する必要がありますか?

+0

あなたのwebpack.config.jsにこのファイルを追加してください。 test:/\.(eot|svg|ttf|woff|woff2)$/、 loader: 'file?name = public/fonts/[name]。[ファイル名:public/fonts/[name]。[ext] ' } – MMK

+0

モジュール:{ローダー:[] {テスト:///(eot|svg|ttf|woff|woff2)$/、ローダー: ] '}} – MMK

+0

それは意味がありますか? – MMK

答えて

2

webpack loader &エクストラクタで作成されたCSSファイルを基準にフォントファイルを読み込みます。私はそのボイラープレートをすばやく見て、それには既にローラーが含まれています。

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

フォントが正しいフォルダにある場合はうまくいくはずです。

関連する問題