Webpack @ font-face相対パスの問題

Question

angle2アプリケーションで相対パスを使用してフォントを読み込む際に問題があります。

私はfonts.lessインサイドこれら二つの輸入

import '../../../public/css/fonts.less'; 
import '../../../public/css/main.less'; 

私はこの@ font-face宣言持っているapp.tsで

：

@font-face { 
    font-family: 'Montserrat'; 
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot'); /* IE9 Compat Modes */ 
    src: url('/public/fonts/Montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('/public/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('/public/fonts/Montserrat/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); /* Legacy iOS */ 
    font-style: normal; 
    font-weight: normal; 
    text-rendering: optimizeLegibility; 
} 

をし、これが正常に動作します。しかし、私が相対的なものに経路を変更しようとすると、例えば。

url('../../fonts/Montserrat/Montserrat-Regular.eot'); 

私はこのエラーを取得しています：

ERROR in ./~/css-loader!./~/less-loader!./public/css/fonts.less Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Montserrat/Montserrat-Regular.eot in [...] @ ./~/css-loader!./~/less-loader!./public/css/fonts.less 6:85-138 ERROR in ./public/css/fonts.less Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Montserrat/Montserrat-Regular.eot in [...]

誰かが問題になることができるか知っていますか？

P.S.私は、理由のために相対パスを使用する必要があります。

Answer 1

webpackで相対パスを使用する特別な理由はありません。 webpack aliasesを使って、この必要性を取り除くことができます。適切に使用されるエイリアスは、これを含む多くの問題を解決できます。私は個人的に傾向がある

src: url('fonts/Montserrat/Montserrat-Regular.eot'); 

：

import 'styles/fonts.less'; 
import 'styles/main.less'; 

とフォントの顔に：エイリアスを使用してモジュールをインポートし、その後、

resolve: { 
    alias: { 
    styles: path.resolve(__dirname, 'public/src'), 
    fonts: path.resolve(__dirname, 'public/fonts') 
    } 
} 

と：ちょうどあなたのCSSやフォントディレクトリの別名を指定ウェブパック構築プロジェクトで相対パスを使用しないようにします。その理由は、はるかにクリーンで読みやすいため、相互に依存する別の場所で相対パスを混在させることによって発生する可能性のある問題を防ぐことができます。その結果、パスを定義し、Webパッケージで相対パスを解決できるようになります。これを実装した後