Propshaft::MissingAssetError in Users::Sessions#newの解決方法

前提・実現したいこと

こんにちは。Ruby on railsでWebアプリケーション開発の勉強を行っているものです。

Bootstrapのインストールにおいて、Importmapを使用しているのですが、
application.cssがロードパスになく(The asset 'application.css' was not found in the load path)、エラーが発生している状況です。

こちらのエラー状況、関連ファイルは以下に掲示いたしました。
ご存じの方がおられましたら、教えていただけると幸いです。

・バージョン
Rails 7.0.2.2

発生している問題・エラーメッセージ

bin/rails s　実行後、localhost:3000にアクセスした時の画面

bin/dev 実行後、localhost:3000にアクセスした時のコンソール

bin/dev
1username@DESKTOP-8ORJ7AS:~/DialogBook$ bin/dev
208:53:46 web.1  | started with pid 1285
308:53:46 css.1  | started with pid 1286
408:53:46 css.1  | yarn run v1.22.17
508:53:46 css.1  | warning ../package.json: No license field
608:53:46 css.1  | $ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
708:53:48 css.1  | Error reading app/assets/stylesheets/application.bootstrap.scss: no such file or directory.
808:53:48 css.1  |
908:53:48 css.1  | Sass is watching for changes. Press Ctrl-C to stop.
1008:53:48 css.1  |
1108:53:50 web.1  | /home/username/DialogBook/vendor/bundle/ruby/3.1.0/gems/bootstrap-sass-3.4.1/lib/bootstrap-sass/version.rb:2: warning: already initialized constant Bootstrap::VERSION
1208:53:50 web.1  | /home/username/DialogBook/vendor/bundle/ruby/3.1.0/gems/bootstrap-5.1.3/lib/bootstrap/version.rb:4: warning: previous definition of VERSION was here
1308:53:50 web.1  | /home/username/DialogBook/vendor/bundle/ruby/3.1.0/gems/bootstrap-sass-3.4.1/lib/bootstrap-sass/version.rb:3: warning: already initialized constant Bootstrap::BOOTSTRAP_SHA
1408:53:50 web.1  | /home/username/DialogBook/vendor/bundle/ruby/3.1.0/gems/bootstrap-5.1.3/lib/bootstrap/version.rb:5: warning: previous definition of BOOTSTRAP_SHA was here
1508:53:50 web.1  | => Booting Puma
1608:53:50 web.1  | => Rails 7.0.2.2 application starting in development
1708:53:50 web.1  | => Run `bin/rails server --help` for more startup options
1808:53:52 web.1  | Puma starting in single mode...
1908:53:52 web.1  | * Puma version: 5.6.2 (ruby 3.1.0-p0) ("Birdie's Version")
2008:53:52 web.1  | *  Min threads: 5
2108:53:52 web.1  | *  Max threads: 5
2208:53:52 web.1  | *  Environment: development
2308:53:52 web.1  | *          PID: 1285
2408:53:52 web.1  | * Listening on http://127.0.0.1:3000
2508:53:52 web.1  | * Listening on http://[::1]:3000
2608:53:52 web.1  | Use Ctrl-C to stop
2708:54:15 web.1  | Started GET "/users/sign_in" for ::1 at 2022-03-11 08:54:15 +0900
2808:54:16 web.1  |   ActiveRecord::SchemaMigration Pluck (3.5ms)  SELECT "schema_migrations"."version" FROM "schema_migrations" ORDER BY "schema_migrations"."version" ASC
2908:54:16 web.1  | Processing by Users::SessionsController#new as HTML
3008:54:23 web.1  |   Rendering layout layouts/application.html.erb
3108:54:23 web.1  |   Rendering devise/sessions/new.html.erb within layouts/application
3208:54:23 web.1  |   Rendered devise/shared/_links.html.erb (Duration: 3.4ms | Allocations: 1443)
3308:54:23 web.1  |   Rendered devise/sessions/new.html.erb within layouts/application (Duration: 200.1ms | Allocations: 16699)
3408:54:25 web.1  | Importmap skipped missing path: application.js
3508:54:25 web.1  | Importmap skipped missing path: application.js
3608:54:25 web.1  |   Rendered layout layouts/application.html.erb (Duration: 1324.6ms | Allocations: 1056498)
3708:54:25 web.1  | Completed 500 Internal Server Error in 8760ms (ActiveRecord: 10.2ms | Allocations: 1110414)
3808:54:25 web.1  |
3908:54:25 web.1  |
4008:54:25 web.1  |
4108:54:25 web.1  | ActionView::Template::Error (The asset 'application.css' was not found in the load path.):
4208:54:25 web.1  |      8:
4308:54:25 web.1  |      9:     <%= javascript_importmap_tags %>
4408:54:25 web.1  |     10:     <%= javascript_tag "application" %>
4508:54:25 web.1  |     11:     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
4608:54:25 web.1  |     12:   </head>
4708:54:25 web.1  |     13:
4808:54:25 web.1  |     14:   <body>
4908:54:25 web.1  |
5008:54:25 web.1  | app/views/layouts/application.html.erb:11

関連ファイル

config/application.rb
1require_relative "boot"
2
3require "rails/all"
4
5# Require the gems listed in Gemfile, including any gems
6# you've limited to :test, :development, or :production.
7Bundler.require(*Rails.groups)
8
9module DialogBook
10  class Application < Rails::Application
11    # Initialize configuration defaults for originally generated Rails version.
12    config.load_defaults 7.0
13    
14    I18n.available_locales = %i(ja en)
15    I18n.enforce_available_locales = true
16    I18n.default_locale = :ja
17    config.time_zone = 'Asia/Tokyo'
18
19    # Configuration for the application, engines, and railties goes here.
20    #
21    # These settings can be overridden in specific environments using the files
22    # in config/environments, which are processed later.
23    #
24    # config.time_zone = "Central Time (US & Canada)"
25    # config.eager_load_paths << Rails.root.join("extras")
26    initializer "importmap" do |app|
27     app.importmap = Importmap::Map.new
28      app.config.importmap.paths << app.root.join("config/importmap.rb")
29      app.config.importmap.paths.each{ |path| app.importmap.draw(path) }
30    end
31  end
32end
33

↓　Rails.application.config.assets.precompile += %w( application.scss )　を追加しました

config/initializers/assets.rb
1# Be sure to restart your server when you modify this file.
2
3# Version of your assets, change this if you want to expire all your assets.
4Rails.application.config.assets.version = "1.0"
5
6# Add additional assets to the asset load path.
7# Rails.application.config.assets.paths << Emoji.images_path
8
9# Precompile additional assets.
10# application.js, application.css, and all non-JS/CSS in the app/assets
11# folder are already added.
12# Rails.application.config.assets.precompile += %w( admin.js admin.css )
13Rails.application.config.assets.precompile += %w( application.scss )
14
15
16# Add node_modules folder to the asset load path.
17Rails.application.config.assets.paths << Rails.root.join("node_modules")

↓　production.rbにおいて、config.assets.compile = true にしています

config/environments/production.rb
1require "active_support/core_ext/integ---er/time"
2
3Rails.application.configure do
4  # Settings specified here will take precedence over those in config/application.rb.
5
6  # Code is not reloaded between requests.
7  config.cache_classes = true
8
9  # Eager load code on boot. This eager loads most of Rails and
10  # your application in memory, allowing both threaded web servers
11  # and those relying on copy on write to perform better.
12  # Rake tasks automatically ignore this option for performance.
13  config.eager_load = true
14
15  # Full error reports are disabled and caching is turned on.
16  config.consider_all_requests_local       = false
17  config.action_controller.perform_caching = true
18
19  # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
20  # or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
21  # config.require_master_key = true
22
23  # Disable serving static files from the `/public` folder by default since
24  # Apache or NGINX already handles this.
25  config.public_file_server.enabled = ENV["RAILS_SERVE_STATIC_FILES"].present?
26
27  # Compress CSS using a preprocessor.
28  # config.assets.css_compressor = :sass
29
30  # Do not fallback to assets pipeline if a precompiled asset is missed.
31  config.assets.compile = true
32
33  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
34  # config.asset_host = "http://assets.example.com"
35
36  # Specifies the header that your server uses for sending files.
37  # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for Apache
38  # config.action_dispatch.x_sendfile_header = "X-Accel-Redirect" # for NGINX
39
40  # Store uploaded files on the local file system (see config/storage.yml for options).

config/importmap.rb
1# Pin npm packages by running ./bin/importmap
2
3pin "application", preload: true
4pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
5pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
6pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
7pin_all_from "app/javascript/controllers", under: "controllers"
8pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.1.3/dist/js/bootstrap.esm.js"
9pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.2/lib/index.js"
10pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"

app/javascript/controllers/application.js
1import { Application } from "@hotwired/stimulus"
2import "popper.js"
3import "bootstrap"
4
5const application = Application.start()
6
7// Configure Stimulus development experience
8application.debug = false
9window.Stimulus   = application
10
11export { application }

app/assets/stylesheets/application.scss
1@import "bootstrap-sprockets";
2@import "bootstrap";

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

回答1件

ベストアンサー

08:53:48 css.1 | Error reading app/assets/stylesheets/application.bootstrap.scss: no such file or directory.

app/assets/stylesheets/application.scssを
app/assets/stylesheets/application.bootstrap.scssに変更してみてください。

application.bootstrap.scssが存在しないのでコンパイルできない
コンパイルできないので builds/application.css も存在しない
よって

08:54:25 web.1 | ActionView::Template::Error (The asset 'application.css' was not found in the load path.):

だと思います。

投稿2022/03/11 16:25

neko_daisuki

総合スコア2090

name_ko

2022/03/12 07:58

neko_daisukiさん、コメントありがとうございます。名前の変更のほか、下記の色々な方法を試したところエラーが解消されました。この度はありがとうございました！・ファイル名を変更　app/assets/stylesheets/application.scss 　↓ 　app/assets/stylesheets/application.bootstrap.scss ・node-sassのインストール（現在非推奨）　npm install node-sass ・package.jsonの修正 "scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules", "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds" } ↓ "scripts": { "build:css": "node-sass --no-source-map --load-path=node_modules app/assets/stylesheets/application.bootstrap.scss app/assets/builds/application.css" } ・node_modules配下にbootstrapをインストール　npm install --save bootstrap jquery popper.js 　・/app/assets/stylesheets/application.bootstrap.scssの修正　@import "bootstrap-sprockets"; 　@import "bootstrap"; 　↓ 　@import "../node_modules/bootstrap/scss/bootstrap";

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