2017-11-24 10 views
0

私はLaravel 5.5を持っており、mixを使ってフォルダにファイルを自動的に生成し、パッケージ管理にはyarnを自動的に生成します。 パッケージフォルダ(node_modules/package_name/module.scss)にあるSASSファイルによってフォントが参照され、そのファイルがmix.sass()で処理されると、これらのフォントは自動的にpublic/fonts/vendor/package_nameフォルダに配置され、結果のCSSファイルのURLは新しいフォントファイルの場所パスに置き換えられます。Laravel mix(Webpack)

ここでは、パッケージに定義されているフォントのみをコピーしたいと思いますが、パッケージ.scssファイルはそれらのすべてを読み込みます。そのために は、代わりにnode_modules/package_name/module.scssを使用しての私は、カスタムファイル(_fonts.scss)を作成し、それをメインのSASSファイル参照:

@font-face { 
    font-family: 'Font-Name'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('node_modules/package_name/fonts/font-name.ttf') format('truetype'); 
} 

を、私は結果の.cssにpublic/fonts/vendor/package_name/font-name.ttfにURLを交換して、フォントファイルをコピーするのWebPACKを設定することができますその場所に?

最終的なURLをソース_fonts.cssに書き込んで、mix.copy()に電話して手動でフォントをコピーできますが、これは間違った方法だと思います。

また、これらのフォントをカスタムフォルダにコピーするための良い方法はありますかpublic/fonts/custom

+0

私は、マイナスの影響があったかもしれない*意見に基づく*最善の方法の要件を削除するようにタイトルを修正しました。それ以外は問題ありません。 –

答えて

0

ミックスのwebpack-rules.jsファイルを確認した後、私は説明した機能は、任意の追加的な作業をせずに、デフォルトで動作しなければならないことを決めた:ロードフォントに関する素敵なarticleを読みながら、その後、

rules.push({ 
    test: /\.(woff2?|ttf|eot|svg|otf)$/, 
    loader: 'file-loader', 
    options: { 
     name: path => { 
      if (! /node_modules|bower_components/.test(path)) { 
       return 'fonts/[name].[ext]?[hash]'; 
      } 

      return 'fonts/vendor/' + path 
       .replace(/\\/g, '/') 
       .replace(
        /((.*(node_modules|bower_components))|fonts|font|assets)\//g, '' 
       ) + '?[hash]'; 
     }, 
     publicPath: Config.resourceRoot 
    } 
}); 

そして私は見たこと.scss必見のパス相対です。 だから私は

node_modules/package_name/fonts 

から

./../../../../../node_modules/package_name/fonts 

にフォントパスを変更し、今では動作します。

関連する問題