Storybook + Font Files

Question

I can't seem to get Storybook's webpack to compile my CSS. It throws up on the font files and tells me I may need a loader, but I've added one to the webpack.config.js file it's using.

Here is my 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 have the loader and it sees it, but it still gives me errors like this:

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>

I get one of those errors for each extension (eot, woff, woff2, ttf, svg).

I know it's reading that webpack.config.js file, because if I do something like change to a nonsensical loader name (like cake), I get an error from it.

Also, the file is in a storybook directory off the root of my project, so resolve(__dirname, '../') should put it at the root of my project as well.

What am I missing?

Answer 1

3 months late, but did you manage to get this working?

I was struggling with the same problem, and adding the following code to the webpack.config.js seems to have worked:

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

Hopefully that may help someone else facing a similar problem.