css - 如何调试 react 组件中的 webpacker CSS 加载问题？

Question

我有一个 Rails 应用程序，在前端有越来越多的 react (使用 react-rails 和 webpacker gem)。我正在摆脱 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？
• 我错过了什么？

** 更新**

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

Answer 1

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

试试这个，

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

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

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

请参阅文档 here