Как отладить проблему загрузки CSS веб-упаковщика в реагирующем компоненте? - PullRequest
Новая
       31

Как отладить проблему загрузки CSS веб-упаковщика в реагирующем компоненте?

0 голосов
/ 15 апреля 2019

У меня есть приложение 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-загрузчик?
  • Чего мне не хватает?

** Обновление **

Я сделал эту работу, добавив операторы @import в файл scss страницы, но это кажется нерегулярным решением. Кто-нибудь знает, как правильно настроить import в компоненте реакции? Иначе, кто-нибудь может объяснить, почему это происходит / не должно?

1 Ответ

2 голосов
/ 15 апреля 2019

Вы делаете ошибку с путем css, пожалуйста, введите его правильно.

попробуйте это, 

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

~ отсутствует в вашем пути, поэтому веб-пакет не может найти файл css.

здесь, ~ означает путь к node_modules, поэтому вы можете просто перейти по этому пути и посмотреть, существует файл или нет.

см. Документацию здесь

...