내 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, '../')
도 내 프로젝트의 루트에 배치해야합니다.
무엇이 누락 되었습니까?
내 의견으로는 webpack의 근본적인 결함 중 하나입니다.이 모든 놀라운 기능을 추가 하겠지만, 예상하지 못한다면 프로젝트에 글꼴을 추가 할 수있는 것과 같은 기본적인 것들을 제거합니다. 기본적으로 너무 많은 설정이 필요합니다. – Pixelomo