Question

我有一个Rails应用，其前端（使用react-rails和webpacker宝石）上的反应越来越多。我正在远离JQuery-mobile的外观和感觉。

我正在尝试使用其{beta} react组件添加fullcalendar（按照他们的说明），但似乎无法加载/应用任何CSS。我用按钮显示数据，但没有完整的日历格式/图像。这是我的代码：

import React from "react"
import PropTypes from "prop-types"
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import listPlugin from '@fullcalendar/list'
import momentPlugin from '@fullcalendar/moment'

import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/list/main.css';


class CourseCalendar extends React.Component {
  render () {
    const header = {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth, dayGridWeek, listMonth'
    }

    return (
      <FullCalendar
        plugins={[ dayGridPlugin, listPlugin ]}
        header={header}
        themeSystem='standard'
        events={[
          { title: 'event 1', allDay: true,
            start: '2019-04-22', end: '2019-4-22' },
          { title: 'event 2', allDay: true,
            start: '2019-04-25', end: '2019-4-30' }
        ]}

      />
    );
  }
}

我以前从未使用过import来引入样式表，而且我似乎还不知道如何调试它。

如何验证这些main.css文件已加载？
如何确定是否存在无法加载的文件？
我需要显式安装或配置css-loader吗？
我想念什么？

**更新**

我通过在页面的scss文件中添加@import语句来完成这项工作，但这似乎是一种低于标准的解决方案。有谁知道如何使React组件中的import正常运行？否则，谁能解释为什么/不应该这样做？

Answer 1

您输入的CSS路径有误，请正确输入。

尝试一下

import '~@fullcalendar/core/main.css';

~在您的路径中丢失，因此，webpack无法找到css文件。

在这里，~表示node_modules的路径，因此，您只需转到该路径即可查看文件是否存在。

请参阅文档here

如何调试React组件中的webpacker CSS加载问题？

1 个答案: