7

我似乎无法让 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, '../')也应将其放在我项目的根目录中。

我错过了什么？

4

2 回答 2

10

迟到了 3 个月，但你设法让它工作了吗？

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

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

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

于 2017-08-23T12:40:47.510 回答
1

为我工作：

config.resolve.roots = [path.resolve(__dirname, '../public')];

实际上不需要额外的配置。故事书只是找不到上下文。

于 2020-11-23T14:37:34.743 回答