错误：您可能需要适当的加载程序来处理此文件类型

Question

尝试设置一个 React Web 应用程序，但在尝试通过导入“semantic-ui-css/semantic.min.css”来实现语义 UI 后继续遇到此错误；在index.jsx中。

我 npm 安装了 css-loader 和 style-loader，因为这就是我在这个新错误之前遇到的错误。

我的猜测是 webpack.config 需要进行调整以以不同的方式处理加载器，但我不确定如何继续进行此操作。

ERROR in ./node_modules/semantic-ui-css/themes/default/assets/fonts/outline-icons.woff
Module parse failed: C:\Users\Shawn\Documents\GitHub\Galavue\Galavue\node_modules\semantic-ui-css\themes\default\assets\fonts\outline-icons.woff Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 15:42-101
 @ ./node_modules/semantic-ui-css/semantic.min.css
 @ ./react-client/src/index.jsx

包.json

ERROR in ./node_modules/semantic-ui-css/themes/default/assets/fonts/outline-icons.woff
Module parse failed: C:\Users\Shawn\Documents\GitHub\Galavue\Galavue\node_modules\semantic-ui-css\themes\default\assets\fonts\outline-icons.woff Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 15:42-101
 @ ./node_modules/semantic-ui-css/semantic.min.css
 @ ./react-client/src/index.jsx

webpack.config.js

{
  "name": "galavue",
  "version": "0.0.0",
  "description": "Galavue",
  "main": "server.js",
  "author": "Shawn",
  "scripts": {
    "dev": "webpack -d --watch",
    "start": "node ./server/index.js",
    "build": "webpack -p",
    "react-dev": "webpack -d --watch",
    "server-dev": "nodemon server/index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/www.github.com/shawnSFU.git"
  },
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/www.github.com/shawnSFU/issues"
  },
  "homepage": "https://github.com/www.github.com/shawnSFU#readme",
  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.17.2",
    "express": "^4.15.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.85.0",
    "webpack": "^3.4.1"
  },
  "devDependencies": {
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1"
  }
}

Answer 1

您需要做一些事情。确保您可以使用~来自 node_modules 的 CSS 导入，例如：

import '~semantic-ui-css/semantic.min.css';

其次，这个CSS文件semantic.min.css也引用*.woff文件。我相信它用于引用外部字体文件。您需要url-loader或file-loader来处理这些类型的文件。示例加载器配置url-loader如下所示：

{
    test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
    },
}

更多文档： url-loader 文件加载器