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

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

BlueprintJS is not loading its icon CSS module, but is able to load the core CSS module

css

blueprint

reactjs

webpack