react-big-calendar import failing for css

Question

I have the react big calendar working but the css import is failing. The documentation says:

Styles can be found at: react-big-calendar/lib/css/react-big-calendar.css, and should be included on the page with the calendar component.

I've seen it imported w/ BigCalendar in other examples but it doesn't seem to be working for me.

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';

How do I do this? Thanks!

Answer 1

Don't know what exactly problem you are facing. But To include css,you can try this. Not tested, but it should work.

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

2. If above not works, copy the react-big-calendar.css file CSS and paste to your own css file.

Answer 2

I found the solution. Just needed to add this to my brunch-config.js file.

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

If your using this solution you can delete the import. You don't need it.

Answer 3

For anyone who stumbles on this issue:

OP is actually quite close. The import line has an additional slash at the front. If you're importing react-big-calendar as a node module the line here:

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

Should be:

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

Answer 4

这适合我

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

Answer 5

try to add this CDN to 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"/>

This worked for me

Answer 6

Try this:

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

but first validate that the file exst in the path/