如何在react组件中调试webpacker CSS加载问题？

Question

我有一个rails应用程序，前端有更多的反应（使用react-rails和webpacker宝石）。我正在摆脱JQuery-mobile的外观和感觉。

我试图使用他们的（beta）fullcalendar组件（按照他们的指示）添加react但我似乎无法获得任何加载/应用的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语句来完成这项工作，但这似乎是一个低于标准的解决方案。有谁知道如何使反应组件中的import正常运行？否则，任何人都可以解释它为什么/不应该？

Answer 1

你在css的路径上犯了错误，请正确输入。

试试这个，

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

你的路径中缺少~，所以webpack无法找到css文件。

在这里，~意味着node_modules的路径，所以你可以简单地走到那条路径，看看文件是否存在。

看，文档here