Webpack @ font-face 상대 경로 문제

Question

angular2 응용 프로그램에서 상대 경로를 사용하여 글꼴을로드 할 때 문제가 있습니다. app.ts에서

는 나는이 @ 글꼴 얼굴 선언이있는 fonts.less 내부 두 수입

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

있습니다

@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. 이유 때문에 상대 경로를 사용해야합니다.

Answer 1

webpack에서 상대 경로를 사용하는 특별한 이유는 없습니다. webpack aliases을 사용하면 이러한 필요성을 없앨 수 있습니다. 제대로 사용 된 별칭은이 문제를 포함하여 많은 문제를 해결할 수 있습니다.

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

및 글꼴 얼굴 : 저는 개인적 경향이

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

별칭을 사용하여 모듈을 다음

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

과를 가져옵니다 그냥 CSS 및 글꼴 디렉토리 별칭을 지정 내 웹팩 내장 프로젝트에서 상대 경로 사용을 피하십시오. 그 이유는 훨씬 더 깔끔하고 읽기 쉽기 때문에 서로 의존하는 서로 다른 장소에서 상대 경로를 혼합 할 때 발생할 수있는 문제를 방지 할 수 있기 때문입니다. 결과적으로 경로를 정의하고 웹팩이 상대 경로를 결정할 수있는 중앙 위치를 갖게됩니다.