Ошибка: вам может понадобиться соответствующий загрузчик для обработки этого типа файла - PullRequest
Новая
       7

Ошибка: вам может понадобиться соответствующий загрузчик для обработки этого типа файла

0 голосов
/ 14 февраля 2019

Попытка настроить реагирующее веб-приложение, но продолжаю сталкиваться с этой ошибкой после попытки реализации семантического пользовательского интерфейса, поместив import "semantic-ui-css / semantic.min.css";в 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

Package.json 

{
  "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"
  }
}

webpack.config.js 

//defines the entry and output points for our application
const path = require('path');
const SRC_DIR = path.join(__dirname, '/react-client/src');
const DIST_DIR = path.join(__dirname, '/react-client/dist');
const webpack = require('webpack');
module.exports = {
    entry: `${SRC_DIR}/index.jsx`,
    output: {
        path: DIST_DIR,
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.css'],
    },
   
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.png$/,
                loader: 'url-loader?limit=100000&minetype=image/png'
            },
            {
                test: /\.jpg/,
                loader: 'file-loader'
            },
            {
                test: /\.jsx?/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
};

1 Ответ

0 голосов
/ 14 февраля 2019

Есть несколько вещей, которые вам нужно сделать.Убедитесь, что вы используете ~ для импорта 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-загрузчик файл-загрузчик

...