Storybook + Font-Dateien

Question

Ich kann nicht scheinen, Storybooks Webpack zu bekommen, um mein CSS zu kompilieren. Es wirft einen Blick auf die Font-Dateien und sagt mir, dass ich vielleicht einen Loader brauche, aber ich habe einen zu der webpack.config.js Datei hinzugefügt, die er benutzt. Hier

ist mein 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, '../') 
     } 
    ] 
    } 
}; 

Ich habe den Lader und es sieht es, aber es gibt mir immer noch Fehler wie folgt aus:

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> 

ich eine dieser Fehler für jede Nebenstelle erhalten (eot, woff, woff2, ttf, svg).

Ich weiß, dass es liest webpack.config.js Datei, denn wenn ich etwas wie zu einem unsinnigen Loader-Namen (wie cake) ändern, bekomme ich einen Fehler von ihm.

Auch ist die Datei in einem storybook Verzeichnis aus der Wurzel meines Projekts, so resolve(__dirname, '../') sollte es auch an der Wurzel meines Projekts setzen.

Was fehlt mir?

Answer 1

3 Monate zu spät, aber hast du es geschafft, dass das funktioniert?

ich mit dem gleichen Problem zu kämpfen hatte, und das Hinzufügen von den folgenden Code zu dem webpack.config.js scheint funktioniert zu haben:

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

Hoffentlich jemand anderes ein ähnliches Problem konfrontiert helfen können.