fullcalendarをCSSに反映させる方法(Ruby on Rails 6 )

#解決したいこと
Ruby on Rails6 でfullcalendarを使用した際に、本番環境で、レイアウトが崩れてしまいます。
本番環境
 ローカル環境

CSSの部分の記述かと思い、

app/assets/stylesheets/application.css

*= require_tree .
*= require_self
*= require fullcalendar
*/

の記述を行うと、

Sprockets::FileNotFound in Events#index
Showing /Users/hamadaryuya/projects/table-tennis-note/app/views/layouts/application.html.erb where line #8 raised:

couldn't find file 'fullcalendar' with type 'text/css'
Checked in these paths:
と表示がされてしまいます。

rails 6がWebpackerに変更になったことによるものかと思うのですが、どのようにfullcalendarを反映させれば良いのかがわかりません。

#コード
app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require fullcalendar
 *= 
 */

 * {
  box-sizing: border-box;
 }

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../calendar")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

application.html.erb


<!DOCTYPE html>
<html>
  <head>
    <title>TableTennisNote</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <header class="header">
      <div class="header__bar row">
        <h1 class="grid-6"><a href="/">卓球共有ノート</a></h1>
        <% if user_signed_in? %>
          <div class="user_nav grid-6">
            <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
            <%= link_to "投稿する", new_event_path, class: "post" %>
          </div>
        <% else %>
          <div class="grid-6">
            <%= link_to "ログイン", new_user_session_path, class: "post" %>
            <%= link_to "新規登録", new_user_registration_path, class: "post" %>
          </div>
        <% end %>
      </div>
    </header>
    <%= yield %>
  </body>
</html>

また、heroku logを確認したところ、
Process exited with status 143
Stopping all processes with SIGTERM
という表記がございました。

デベロッパーツールと
でローカル環境と見比べた結果、
本番環境には、
mixed content: the page at でりせっとCSSの部分でエラーが生じていたため、リセットCSSの記述を削除してpushし、確認を行いました。
デベロッパーツールのコンソール上でエラーは消えたのですが、表示は変わらないままでした。

以上が主な点になるかと思います。
勉強不足で申し訳ございませんが、いろいろ検索したのですが、方法が分からなかったのでどなたか教えていただけると幸いでございます。

ご確認よろしくお願いいたします。

no1knows

2020/10/12 11:47 編集

Showing /Users/hamadaryuya/projects/table-tennis-note/app/views/layouts/application.html.erb where line #8 raised: ということなのでapplication.html.erbを追記ください。

ryuya1204

2020/10/12 13:48

ご回答いただきありがとうございます。 application.html.erbのコードを追記させていただきましたのでご確認よろしくお願いいたします。

no1knows

2020/10/12 16:22

追加でfullcalendarのCSSファイルの設置場所をおしえてください。

ryuya1204

2020/10/13 01:10

webpackを用いているためか分からないですが、fullcalendarの設置場所が見つからない状態です。なので、そもそもrequireでfullcalendarを呼び出す必要が無いのではと思い、require=fullcalendarの記述を消してgit push heroku masterを実行するとエラーが消えるのですが、本番環境では反映されないというような状況になります。わかりづらくて申し訳ございません。

行動規範の内容に同意します

回答2件

時期が結構前ですので既に解決済みかもしれませんが、ご容赦ください。
私も同じような現象にハマっていましたが、以下をjsファイルに記述したらうまくいきました。
一度試してみてはいかがでしょうか。

import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'

投稿2021/02/03 07:57

zawawa0722

総合スコア2

公式サイトのインストール手順に沿って設定すると良いかと思います。

fullcalendar-rails公式：https://github.com/bokmann/fullcalendar-rails

投稿2020/10/13 01:23

no1knows

総合スコア3365

ryuya1204

2020/10/13 02:53

ご回答ありがとうございます。公式サイトのインストール手順に沿って実行をしても、同様の現象で、ローカル環境では正常にカレンダーが表示されるのですが、本番環境だとCSSが反映されない問題に衝突しました。公式だと、Gemでダウンロードしているので、cssファイルにrequire = fullcalendarを記述してもエラーが起こらないのですが、どういう訳かcssファイルは読み込まれないみたいです…