webpack 빌드에 글꼴을 추가하는 방법은 무엇입니까?

웹팩 프로젝트에 글꼴을 어떻게 추가합니까? 나는 12 개의 웹팩 가이드를 살펴본 후에도 폰트 추가를위한 실제 해결책을 찾을 수 없다는 것을 믿을 수 없다. https://github.com/sandrina-p/essential-webpack-boilerplate webpack 빌드에 글꼴을 추가하는 방법은 무엇입니까?

폴더 구조는 다음과 같다 : 나는 여기에서 찾을 수있는 보일러를 사용하고, 반작용 사용하고 있지 않다

나는 내 설정 파일에 다음을 추가 한

src 
|-fonts 
|-scripts 
|-styles 
index.thml

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/, 
    loader: 'file-loader?name=/fonts/[name].[ext]' 
},

나는 그렇게처럼 내 CSS에서 글꼴 가족을 수입하고 있습니다 :

@font-face { 
    font-family: 'MPR' !important; 
    src: url('/styles/MPR.ttf') format('ttf'), 
} 



h2 { 
    font-family: 'MPR'; 
}

I을 오류가 없으면 h2 태그는 글꼴을 표시하지 않고 기본값 인 새 로마자를 기본값으로 사용합니다. 모든 통찰력은 크게 평가 될 것이고, 저는 글꼴을 사용할 수 있도록 꿀꺽 꿀꺽 삼키기 위해 제 전체 프로젝트를 재구성하고 싶지는 않습니다.

2017-11-03 figaro

내 생각 엔 그게의 일부, 당신은 URL을

2017-11-03 08:01:36

예에 대한 상대 경로와 절대하지 경로를 추가 할 필요가있다. 나는 내 글꼴을 정의한 CSS 파일을 만든 다음이를 내 주 js 파일로 가져온 경우 그 글꼴이 작동한다는 것을 알게되었습니다. 그리고 네, 제 경로를 바꿔야했습니다. – figaro

답변