BlueprintJS 不加载其图标 CSS 模块，但能够加载核心 CSS 模块

Question

我正在学习将 BlueprintJS 合并到我的 React Web 应用程序中，并且在加载某些 CSS 模块时遇到了很多问题。

我已经安装npm install @blueprintjs/core和npm install react-transition-group.

BlueprintJS入门文档说要像这样加载 CSS 文件：

 // or, using node-style package resolution in a CSS file: 
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

我目前正在使用webpack我的构建工具，所以我在我的webpack.config.js:

然而，当我试图建立我的bundle.js，我收到包括在此错误消息~@blueprintjs/icons/lib/css/blueprint-icons.css的文件：

ERROR in ./node_modules/@blueprintjs/icons/resources/icons/icons-16.eot
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css 7:296-341
 @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./js/styles/styles.scss
 @ ./js/styles/styles.scss
 @ ./js/app.js
 @ multi ./js/app.js

但是，在导入核心blueprint.css文件时，我没有收到此错误。该错误消息似乎表明我的加载程序在解析~符号时遇到问题。但是，我不明白为什么解析它之前的行没有问题 ( @import "~@blueprintjs/core/lib/css/blueprint.css";)。

有人可以将我引向正确的方向以解释为什么会发生此错误吗？

Answer 1

在查看错误来自 ( ./node_modules/@blueprintjs/icons/resources/icons/icons-16.eot) 的确切位置后，我意识到 webpack 无法加载.eot文件，因此出现Module parse failed: Unexpected character '' (1:0)错误消息。

对我来说，这里的问题是没有合适的装载机。Blueprint 内部使用的大量.eof和.woff文件需要特殊的加载程序（file-loader和url-loader）。

  {
    test: /\.(ttf|eot|svg)$/,
    use: {
      loader: 'file-loader',
      options: {
        name: 'fonts/[hash].[ext]',
      },
    },
  },
  {
    test: /\.(woff|woff2)$/,
    use: {
      loader: 'url-loader',
      options: {
      name: 'fonts/[hash].[ext]',
      limit: 5000,
      mimetype: 'application/font-woff',
    },
  },
}