css - BlueprintJS 未加载其图标 CSS 模块，但能够加载核心 CSS 模块

Question

我正在学习将 BlueprintJS 合并到我的 React 网络应用程序中，并且在加载某些 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-装载机)。

  {
    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',
    },
  },
}