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

Question

>我有一个rails应用程序，前端的反应量越来越大(使用react-rails和webpacker宝石)。我正在远离JQuery-mobile的外观和感觉。

我正在尝试使用他们的(测试版)反应组件(按照他们的说明)添加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 加载器？
• 我错过了什么？

**更新**

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

Answer 1

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

试试这个，

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

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

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

请参阅此处的文档