首页 文章

故事书字体文件

提问于
浏览
4

我可以't seem to get Storybook'的webpack来编译我的CSS . 它抛出了字体文件并告诉我可能需要一个加载器,但我已经添加了一个它正在使用的 webpack.config.js 文件 .

这是我的 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, '../')
      }
    ]
  }
};

我有加载器,它看到了它,但它仍然给我这样的错误:

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) .

我知道它正在读取 webpack.config.js 文件,因为如果我做了类似改变为无意义的加载程序名称(如 cake ),我会收到错误 .

此外,该文件位于项目根目录下的 storybook 目录中,因此 resolve(__dirname, '../') 也应该将其放在项目的根目录下 .

我错过了什么?

1 回答

  • 5

    迟了3个月,但你有没有设法让这个工作?

    我正在努力解决同样的问题,并将以下代码添加到 webpack.config.js 似乎有效:

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

    希望这可以帮助其他人面临类似的问题 .

相关问题