2016-07-31 1 views
1

NPM에서 font-awesome을 사용하고 webpack과 함께 사용하려고합니다. 그러나 글꼴을 찾을 수 없다는 오류가 발생합니다. 글꼴은 ~/Projects/GrailLuck/node_modules/font-awesome/fonts 아래에 있습니다.Webpack : 글꼴을 찾을 수 없어 글꼴 가져 오기에 실패했습니다.

나는 그렇게처럼 내 말대꾸 파일에 글꼴 멋진 가져옵니다

@import "~font-awesome/css/font-awesome"; 

내 로더 : 여기

loaders: [ 
{ 
    test: /\.js$/, 
    exclude: /node_modules|app.js/, 
    loader: "babel-loader", 
    query: { 
     presets: ['es2015'] 
    } 
}, 
{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    include: [ path.resolve(__dirname, "src", "sass") ], 
    loader: 'style!css!sass?includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib') 
}, 
{ 
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&mimetype=application/font-woff" 
}, 
{ 
    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&mimetype=application/font-woff" 
}, 
{ 
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&mimetype=application/octet-stream" 
}, 
{ 
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "file" 
}, 
{ 
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
    loader: "url?limit=10000&mimetype=image/svg+xml" 
}] 

하고 내가지고있어 오류 :

ERROR in ./~/css-loader!./~/sass-loader?includePaths[]=/home/spock/Projects/GrailLuck/web/~/compas 
s-mixins/lib!./src/sass/app.scss 
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.svg in /home/spo 
ck/Projects/GrailLuck/web/src/sass 
@ ./~/css-loader!./~/sass-loader?includePaths[]=/home/spock/Projects/GrailLuck/web/~/compass-mixi 
ns/lib!./src/sass/app.scss 6:10469-10520 

을 위와 동일한 오류가 여러 개 있습니다. 각 글꼴 유형마다 하나씩.

아이디어를 얻는 방법은 무엇입니까?

답변

0

font-awesome-sass-loader이라는 패키지가 있습니다. 완벽하게 작동하고 웹 주변의 다른 솔루션처럼 hackish하지 않습니다.

+0

이 항목을 확장하면 좋을 것입니다. – Ashnur

+0

사용 방법은 문서에 있습니다. 솔직히 말하면 아주 간단합니다. – BugHunterUK

+1

글쎄, 그것은 나를 위해 간단하지 않았다. 당신이 너무 영리하거나 어리석은 사람 일지 모르지만, 사실 "그냥 사용하는 것"이상의 것이 있다면,이 질문을하는 사람이 구글을 검색하고 발견하면 좋을 것입니다. – Ashnur

관련 문제