将 react-datepicker css 加载到 jsx 文件中的问题答案

【问题标题】：Issue with loading react-datepicker css into jsx file将 react-datepicker css 加载到 jsx 文件中的问题
【发布时间】：2018-10-01 06:04:03
【问题描述】：

根据react-datepicker 文档，我尝试导入css 文件，但react 抛出You may need an appropriate loader to handle this file type 错误。我已将css-loader 包含在webpack-config 文件中。有什么遗漏吗？以下是jsx文件的import部分

import React, { Component } from 'react';
import moment from 'moment';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

下面是 webpack.config.js

const Notifier = require('webpack-build-notifier');
const path = require('path');

const plugins = [new Notifier({ title: 'Webpack' })];
const output = path.join(__dirname, 'public', 'javascripts');

const babelConfig = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      targets: {
        browsers: [
          'last 2 versions',
          'ie >= 11',
        ],
      },
    }],
    '@babel/react',
  ],
};

const cssConfig = [
    { loader: 'style-loader' },
    { loader: 'css-loader', options: { importLoaders: 1 } },
    { loader: 'postcss-loader' },
];

const sassConfig = [
  { loader: 'style-loader' },
  { loader: 'css-loader', options: { importLoaders: 1 } },
  { loader: 'postcss-loader' },
  { loader: 'sass-loader' },
];

module.exports = {
  entry: { bundle: ['./src/client/router.jsx'] },
  output: { filename: '[name].js', path: output },
  devtool: 'source-map',
  resolve: { extensions: ['.js', '.jsx', '.json', '.css', '.scss'] },
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: cssConfig,
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: sassConfig,
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: babelConfig,
      },
    ],
  },
  plugins,
};

【问题讨论】：

尝试从cssConfig 中删除postcss-loader。

标签： javascript reactjs webpack react-datepicker

【解决方案1】：

在我的例子中，当使用 react_rails 时，我必须在 scss 中导入与我正在安装的主要 React 组件 (app/assets/stylesheets/index.scss) 相对应的文件。

@import "react-datepicker/dist/react-datepicker";

【讨论】：

【解决方案2】：

问题是react-datepicker 本身是一个节点模块，它本身包含css 文件。我通过手动复制和粘贴那些css 文件使其工作在项目位置中的某个位置，除了nodu_modules 文件夹（因为这被webpack 配置排除在外）

【讨论】：

【解决方案3】：

import DatePicker from "react-datepicker"
require('react-datepicker/dist/react-datepicker.css')

它应该可以工作

【讨论】：