React-filepond внешний CSS не применяется. Я подозреваю, что это проблема веб-пакета

Question

Это бьет меня по голове. Я использую модуль response-filepond в своем приложении реакции, но внешний CSS не применяется.Модуль работает, но не имеет стиля.Я подозреваю, что это проблема загрузчика в веб-пакете, но я все еще изучаю веб-пакет и, возможно, что-то пропустил.Спасибо!

Вот импорт по реакции-filepond:

import { FilePond } from 'react-filepond';
import 'filepond/dist/filepond.css';        // located in node_modules

Вот мой webpack.config.js. Я использую веб-пакет 3.12.0

const path = require('path');
const autoprefixer = require('autoprefixer');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    chunkFilename: '[id].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js', 'jsx', '.css']
  },
  module: {
    rules: [
    {
        test: /\.js$/,
        loader: 'babel-loader',
            options: {
                presets: ['react']
            },
        exclude: /node_modules/
    },
    {
        test: /\.css$/,
        use: [
        { loader: 'style-loader' },
        {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]__[hash:base64:5]'
            }
        },
        {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                autoprefixer({
                  browsers: [
                    "> 1%",
                    "last 2 versions"
                  ]
                })
              ]
            }
        }
      ]
    },
    {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'url-loader?limit=8000&name=images/[name].[ext]'
    }
  ]
},
devServer: {
    historyApiFallback: true
},
plugins: [
    new htmlWebpackPlugin({
      template: __dirname + '/src/index.html',
      inject: 'body',
      filename: 'index.html'
    })
  ]
};

Answer 1

Я нашел решение для других, интересующихся этим.

Проблема : Я использую CSS-модули в реакции (обратите внимание на строчные модули: true в конфигурации моего css-загрузчика в моем webpack-config.js

Модуль внешнего реагирования, который я пытался использовать, НЕ использует модули CSS.

Решение : создать второе правило для внешнего CSS. Таким образом, у меня есть один для моего CSS (как в приведенном выше источнике), а затем я добавил это правило:

  {
    /* External CSS from node_modules */
    test: /\.css$/,
    include: /node_modules/,
    loader: [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: 1,
                minimize: true,
            },
        }
    ]
  },

Самое главное, я НЕ включал модули CSS

И затем, в своем другом правиле CSS, я добавил:

    exclude: /node_modules/,