css - React-filepond 外部 CSS 未被应用。我怀疑是webpack的问题

Question

这让我很头疼。我在我的 React 应用程序中使用了 react-filepond 模块，但没有应用外部 CSS。该模块有效但没有样式。我怀疑这是 webpack 中的加载程序问题，但我仍在学习 webpack 并且可能遗漏了一些东西。谢谢!

这里是根据 react-filepond 的导入:

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

这是我的 webpack.config.js。我正在使用 webpack 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

我找到了其他人对此疑惑的解决方案。

问题:我在 React 中使用 CSS 模块(注意我的 webpack-config.js 中我的 css-loader 配置中的行 modules:true

我尝试使用的外部 react 模块不使用 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/,