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

Question

我正在学习将 BlueprintJS 整合到我的 React Web 应用程序中，但在加载某些 CSS 模块时遇到了很多麻烦。

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

BlueprintJS Getting Started Docs 说要像这样加载 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',
    },
  },
}