Fullcalendar.io CSS не работает в приложении rails 6

Question

Я создаю приложение RoR с версией 6.0.2 рельсов. Мне нужно использовать Fullcalendar.io для моего проекта:

Пока сделал:

yarn add @fullcalendar/core @fullcalendar/daygrid @fullcalendar/list

В моем приложении. js Файл:

window.Calendar = require("@fullcalendar/core").Calendar;
window.dayGridPlugin = require("@fullcalendar/daygrid").default;
window.listPlugin = require("@fullcalendar/list").default;

В моем pages.s css file:

@import '@fullcalendar/core/main.css';
@import '@fullcalendar/daygrid/main.css';
@import '@fullcalendar/list/main.css';

В моем календаре. html .erb page:

<section class="section">
  <div class="container m-t-20">
    <div id="calendar"></div>
  </div>
</section>



<script>

  $(function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new Calendar(calendarEl, {
      header: {
        left: 'prev,next',
        right: 'dayGridMonth, listMonth'
      },

      plugins: [ dayGridPlugin, listPlugin ],
      defaultView: 'dayGridMonth'
    });

    calendar.render();
  });
</script>

После запуска приложения я вижу на странице календаря: даты и информация из календаря, но нет CSS.

Какой шаг мне не хватает? Большое спасибо

Answer 1

В зависимости от того, используете ли вы Webpack или просто компрессор CSS, вы не сможете просто импортировать CSS, ссылаясь на пакет.

Например, @import '@fullcalendar/core/main.css'; ссылается на пакет @fullcalendar/core в вашей папке node_modules, но некоторые процессоры CSS не настроены на поиск в node_modules.

Если это так, тогда будет работать такой простой путь:

@import 'node_modules/@fullcalendar/core/main.css';
@import 'node_modules/@fullcalendar/daygrid/main.css';
@import 'node_modules/@fullcalendar/list/main.css';

Если это не так, вам нужно использовать относительный путь:

@import '../node_modules/@fullcalendar/core/main.css';
@import '../node_modules/@fullcalendar/daygrid/main.css';
@import '../node_modules/@fullcalendar/list/main.css';

Возможно, вам придется изменить путь в приведенном выше примере для вашей настройки c. Путь к node_modules должен быть относительно ваших файлов CSS.