"vue-webpack"ビルドプロセスに "google-fonts-webpack-plugin"を統合

Question

現在、Webpackビルドプロセスに静的オフラインフォントを統合しようとしています。私はvue-webpackビルドプロセスをビルドプロセスの基礎として使用しています。

この素晴らしいライブラリgoogle-fonts-webpack-pluginは、すべてのフォントファイルと1つのCSSファイルを提供しています。

私はこのような既存のビルドvue-webpack PRODにそれを統合：

plugins: [ 
    // http://vuejs.github.io/vue-loader/en/workflow/production.html 
    new webpack.DefinePlugin({ 
    'process.env': env 
    }), 

    new GoogleFontsPlugin({ 
    fonts: [ 
     { family: 'Roboto', variants: [ '300', '400', '400italic', '500' ] } 
    ] 
    }), 

    new webpack.optimize.UglifyJsPlugin({ 
    [ ... ] 

グーグル・フォント-のWebPACK - プラグインの結果のファイルは、そうでない場合は、定期的に生成されるファイルの完全に独立しているようです。つまり、結果として得られるfonts.cssは、バージョン管理されたCSSファイルの一部ではありません。 dist/フォルダには、fonts.cssとディレクトリfonts/が表示されますが、それ以外のものとしてはstatic/フォルダにも含まれていません。

fonts.cssがバージョン付きCSSファイルとstatic/fontsディレクトリのフォントファイルになるように、このライブラリを通常のCSS /フォントビルドプロセスvue-webpackに含めるにはどうすればよいですか？

Answer 1

このプラグインがVue webpackビルドで動作するとは思えません。あなたは、たとえば、あなたがしたいフォントとCSSを置くために、いくつかの設定を追加することができます。

new GoogleFontsPlugin({ 
    fonts: [ 
    { family: 'Roboto', variants: [ '300' ] } 
    ], 
    path: "../src/assets/", 
    filename: "../src/assets/fonts.css" 
}), 

しかし、ファイルローダーは、CSSファイルにアクセスしようとする前に、プラグインが書かれているように、あなたは、ファイルを取得することはできませんエラーを投げる。また、フォントは./distフォルダに直接置くこともできますが、プラグインは絶対パス（つまり/dist/static/fonts/）を使用してindex.htmlにパスを書き込みます。これを変更することはできません。ソースコード。

ビルドを実行する前に、Gulpのようなものを使用してファイルやcssをassetsフォルダにダウンロードすることをお勧めします。 （おそらく：https://www.npmjs.com/package/gulp-google-webfonts）

Answer 2

npmモジュールtypeface-robotoを使用して、そのモジュールからindex.cssをインポートできます。