Fullcalendar.io CSS在Rails 6应用程序中不起作用

Question

此bounty已结束。该问题的答案有资格获得+ 50声望赏金。赏金宽限期在20小时内结束。Tomas 正在寻找来自信誉良好的来源的答案。

我正在使用6.0.2版本的rails构建RoR应用程序。我需要为我的项目使用Fullcalendar.io：

到目前为止：

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

在我的application.js文件中：

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

在我的pages.scss文件中：

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

在我的calendar.html.erb页面中：

<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';

您可能必须在上面的示例中为您的特定设置更改路径。 node_modules的路径应相对于CSS文件。