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

Question

我正在使用 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 文件。

Answer 2

我终于通过添加以下内容找到了解决方案：

在 package.json 中

"moment": "^2.29.1"

并在 app/javascript/packs/application.js 中

import moment from 'moment'
window.moment = moment