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

Question

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

我正在尝试使用他们的（测试版）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 语句来完成这项工作，但这似乎是一个低于标准的解决方案。有谁知道我怎样才能使反应组件中的import 正常工作？否则，谁能解释为什么会/不应该？

Answer 1

css路径有误，请正确输入。

试试这个，

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

您的路径中缺少~，因此 webpack 无法找到 css 文件。

这里，~ 表示到node_modules 的路径，因此，您可以简单地转到该路径并查看文件是否存在。

请参阅文档here