2017-05-18 9 views
2

내 CSS를 컴파일하기 위해 Storybook의 webpack을 가져올 수 없습니다. 그것은 글꼴 파일을 던져서 로더가 필요할 수도 있다고 알려주지 만, 사용중인 webpack.config.js 파일에 하나를 추가했습니다. 여기 Storybook + 글꼴 파일

은 내 webpack.config.js :

const resolve = require('path').resolve; 

module.exports = { 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loaders: ['style', 'css', 'postcss?modules'], 
     include: resolve(__dirname, '../') 
     }, 
     { 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
     loaders: ['file'], 
     include: resolve(__dirname, '../') 
     } 
    ] 
    } 
}; 

나는 로더를 가지고 그것을보고,하지만 여전히 날 같은 오류를 제공합니다 : I는 각 확장에 대한 이러한 오류 중 하나를 얻을

ERROR in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 
Module parse failed: /home/dcpdev/projects/my-project/node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (1:0) 
    at Parser.pp$4.raise (/home/dcpdev/projects/my-project/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15) 
    at Parser.pp.unexpected (/home/dcpdev/projects/my-project/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10) 
    at Parser.pp$3.parseExprAtom (/home/dcpdev/projects/my-project/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12) 
    <snip> 

을 (eot, woff, woff2, ttf, svg).

무의미한 로더 이름 (예 : cake)을 변경하면 오류가 발생하기 때문에 webpack.config.js 파일을 읽는 것으로 알고 있습니다.

또한이 파일은 내 프로젝트의 루트 외부 storybook 디렉토리에 있으므로 resolve(__dirname, '../')도 내 프로젝트의 루트에 배치해야합니다.

무엇이 누락 되었습니까?

+0

내 의견으로는 webpack의 근본적인 결함 중 하나입니다.이 모든 놀라운 기능을 추가 하겠지만, 예상하지 못한다면 프로젝트에 글꼴을 추가 할 수있는 것과 같은 기본적인 것들을 제거합니다. 기본적으로 너무 많은 설정이 필요합니다. – Pixelomo

답변

1

3 개월 늦었지만이 작업을 처리 할 수 ​​있었습니까?

저도 같은 문제로 고민하고 webpack.config.js에 다음 코드를 추가 한이 일 것으로 보인다 : 다른 사람이 비슷한 문제에 직면 도움이 될 수

{ 
    test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
    loaders: ['file-loader'], 
    include: path.resolve(__dirname, '../') 
} 

희망을.

+1

굉장 !! 그것은 도움이 =) 나는이 대답을 upvoting. – petajamaja