react-big-calendar 导入 css 失败答案

【问题标题】：react-big-calendar import failing for cssreact-big-calendar 导入 css 失败
【发布时间】：2019-06-06 15:18:36
【问题描述】：

我的反应大日历工作，但 css 导入失败。文档说：

样式可以在：react-big-calendar/lib/css/react-big-calendar.css 中找到，并且应该包含在带有日历组件的页面中。

我在其他示例中看到它使用 BigCalendar 导入，但它似乎对我不起作用。

import '/react-big-calendar/lib/css/react-big-calendar.css';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
import Month from './Month';
import React from 'react';
import Showfeed from './Showfeed';

我该怎么做？谢谢！

【问题讨论】：

你的 webpack 加载器是什么？你需要告诉 webpack 关于 css 的事情。
我使用的是早午餐而不是 Webpack，但您的回答为我指明了正确的方向。
导入'react-big-calendar/lib/css/react-big-calendar.css'

标签： css reactjs calendar

【解决方案1】：

不知道您到底面临什么问题。但是要包含 css，你可以试试这个。未经测试，但它应该可以工作。

require('react-big-calendar/lib/css/react-big-calendar.css');

如果上述方法不起作用，请复制 react-big-calendar.css 文件 CSS 并粘贴到您自己的 css 文件中。

【讨论】：

它尝试了你的建议。还是行不通。错误是......未捕获的错误：无法从“组件/Calendar.jsx”（...）中找到模块“react-big-calendar/lib/css/react-big-calendar.css”
你能检查 node_modules 中的 CSS 文件吗？
刚刚检查过。文件在那里。似乎路径是正确的。它只是没有找到它。
因此，剩下的唯一选项是在 inde.html 中包含日历 CSS。
我将建议的 require 语句添加到我的组件中并且它起作用了

【解决方案2】：

对于任何偶然发现此问题的人：

OP 实际上非常接近。导入行前面有一个额外的斜线。如果您将 react-big-calendar 作为节点模块导入，则此处的行：

import '/react-big-calendar/lib/css/react-big-calendar.css';

应该是：

导入'react-big-calendar/lib/css/react-big-calendar.css'；

【讨论】：

【解决方案3】：

尝试将此 CDN 添加到 your-react-project-root/public/index.html

<link href="https://cdn.jsdelivr.net/npm/react-big-calendar@0.19.0/lib/css/react-big-calendar.css" rel="stylesheet"/>

这对我有用

【讨论】：

【解决方案4】：

我找到了解决方案。只需要将它添加到我的 brunch-config.js 文件中。

npm: {
  styles: {
  'react-big-calendar': ['lib/css/react-big-calendar.css']
  }
},

如果您使用此解决方案，您可以删除导入。你不需要它。

【讨论】：

【解决方案5】：

这对我有用

import '!style-loader!css-loader!react-big-calendar/lib/css/react-big-calendar.css';

【讨论】：

【解决方案6】：

试试这个：

import '../lib/css/react-big-calendar.css'

但首先验证文件是否存在于路径中/

【讨论】：