STUDY MEMO

学習のメモ書き

<Ruby on Rails エラー編> ActionView::Template::Error (Webpacker can't find application.css ~ )

エラー

webpackerを使ってscssを管理しようとしたとき、以下のエラーが発生。

I, [2021-06-08T10:28:14.737101 #30893]  INFO -- : [c266ae5e-e551-43a4-81bb-15fdfa2c28cf] Started GET "/" for 127.0.0.1 at 2021-06-08 10:28:14 +0900
I, [2021-06-08T10:28:14.749872 #30893]  INFO -- : [c266ae5e-e551-43a4-81bb-15fdfa2c28cf] Processing by TopController#index as HTML
I, [2021-06-08T10:28:14.795068 #30893]  INFO -- : [c266ae5e-e551-43a4-81bb-15fdfa2c28cf]   Rendered top/index.html.slim within layouts/application (Duration: 27.3ms | Allocations: 19668)
I, [2021-06-08T10:28:14.806765 #30893]  INFO -- : [c266ae5e-e551-43a4-81bb-15fdfa2c28cf]   Rendered layout layouts/application.html.slim (Duration: 39.1ms | Allocations: 30019)
I, [2021-06-08T10:28:14.806993 #30893]  INFO -- : [c266ae5e-e551-43a4-81bb-15fdfa2c28cf] Completed 500 Internal Server Error in 57ms (Allocations: 32489)
F, [2021-06-08T10:28:14.808044 #30893] FATAL -- : [c266ae5e-e551-43a4-81bb-15fdfa2c28cf]   
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf] ActionView::Template::Error (Webpacker can't find application.css in /Users/user_name/workspace/directory/directory/app_name/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/js/application-5cb4ca266ae261975578.js",
  "application.js.map": "/packs/js/application-5cb4ca266ae261975578.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-5cb4ca266ae261975578.js"
      ],
      "js.map": [
        "/packs/js/application-5cb4ca266ae261975578.js.map"
      ]
    },
    "stylesheets/result/index": {
      "js": [
        "/packs/js/stylesheets/result/index-ba2c33120e6a24a6616f.js"
      ],
      "js.map": [
        "/packs/js/stylesheets/result/index-ba2c33120e6a24a6616f.js.map"
      ]
    },
    "stylesheets/top/index": {
      "js": [
        "/packs/js/stylesheets/top/index-8dc680d315d67e28709d.js"
      ],
      "js.map": [
        "/packs/js/stylesheets/top/index-8dc680d315d67e28709d.js.map"
      ]
    }
  },
  "media/images/akadamakinugasatake.png": "/packs/media/images/akadamakinugasatake-04ddd2527167f8c43cba235efe2d15e9.png",
  "media/images/amigasatake.png": "/packs/media/images/amigasatake-a0045880245ff738c222123689b941d1.png",
  "media/images/benitengutake.png": "/packs/media/images/benitengutake-5df2558d6c68efd4e0a8b48f25dba3e3.png",
  "media/images/kaentake.png": "/packs/media/images/kaentake-0cdd4fcaf8fed2b3fcd95b8576a415de.png",
  "media/images/kakishimezi.png": "/packs/media/images/kakishimezi-ae4b6d03dfa8273df8a73192bbef195d.png",
  "media/images/kanzoutake.png": "/packs/media/images/kanzoutake-aa514dfa626e78d2df9892d4fc2b4154.png",
  "media/images/kinoko.png": "/packs/media/images/kinoko-f10be6dee55e1eb819cd1dea3fe26902.png",
  "media/images/kusaurabenitake.png": "/packs/media/images/kusaurabenitake-7ac1b93afd48b39bb2044690c8f93de8.png",
  "media/images/sasakurehitoyotake.png": "/packs/media/images/sasakurehitoyotake-035a9182816ef54713dac9023d609445.png",
  "media/images/shirotamagotengutake.png": "/packs/media/images/shirotamagotengutake-49f131d360d889ef857590b41043c7e4.png",
  "media/images/tukiyotake.png": "/packs/media/images/tukiyotake-337979c48dbf4355c1e43d0fdb6b1f90.png",
  "stylesheets/result/index.js": "/packs/js/stylesheets/result/index-ba2c33120e6a24a6616f.js",
  "stylesheets/result/index.js.map": "/packs/js/stylesheets/result/index-ba2c33120e6a24a6616f.js.map",
  "stylesheets/top/index.js": "/packs/js/stylesheets/top/index-8dc680d315d67e28709d.js",
  "stylesheets/top/index.js.map": "/packs/js/stylesheets/top/index-8dc680d315d67e28709d.js.map"
}
):
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf]     12:     meta[name="viewport" content="width=device-width,initial-scale=1"]m
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf]     13:     = csrf_meta_tags
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf]     14:     = csp_meta_tag
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf]     15:     = stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf]     16:     = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf]     17:   body
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf]     18:     header.py-4
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf]   
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf] app/views/layouts/application.html.slim:15
F, [2021-06-08T10:28:14.808044 #30893] FATAL -- : [c266ae5e-e551-43a4-81bb-15fdfa2c28cf]   
[c266ae5e-e551-43a4-81bb-15fdfa2c28cf] ActionView::Template::Error (Webpacker can't find application.css in /Users/user_name/workspace/directory/directory/app_name/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.

Webpacker can't find application.cssということ。

trueになっていると自動でcssファイルを探してしまうため、webpacker.ymlのproductの設定を

extract_css: false

にすると、cssを探さなくなる。