未应用 React-filepond 外部 CSS。我怀疑这是一个 webpack 问题答案

【问题标题】：React-filepond external CSS is not being applied. I suspect it's a webpack issue未应用 React-filepond 外部 CSS。我怀疑这是一个 webpack 问题
【发布时间】：2019-04-21 08:01:41
【问题描述】：

这让我大吃一惊。我在我的 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'
    })
  ]
};

【问题讨论】：

标签： css reactjs webpack

【解决方案1】：

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

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

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

【讨论】：