Techioz Blog

Rails のベンダーフォルダーからアセットをロードできません

概要

私は Ruby on Rails の初心者で、Instagram クローンを構築しようとしています。YouTube チュートリアルに従っています。チュートリアルについてはここをクリックしてください

サードパーティのテンプレートを使用し、vendors/assets/stylesheets/bootstrap.min.scc パスに bootstrap.min.scc ファイルをロードし、vendors/assets/javascripts/bootstrap.min.js に bootstrap.min.js をロードしました。

app/assets/javascripts/application.js 内のこれらのファイルも参照しました。

これが私のapplication.jsです


//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery.min
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require bootstrap.min
//= require_tree .

これが私の application.css です

 *
 * 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 bootstrap.min
 *= require_self
 */

しかし、サーバーを起動しようとすると。エラーが発生し、サーバーが起動しません。 これがエラーのスクリーンショットです。

これはログに記録されているものです

ActionView::Template::Error (couldn't find file 'bootstrap.min' with type 'text/css'
Checked in these paths: 
  /Users/mabhishek/rails_projects/instagram/app/assets/config
  /Users/mabhishek/rails_projects/instagram/app/assets/images
  /Users/mabhishek/rails_projects/instagram/app/assets/javascripts
  /Users/mabhishek/rails_projects/instagram/app/assets/stylesheets
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/jquery-rails-4.3.5/vendor/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/coffee-rails-4.2.2/lib/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/actioncable-5.2.4.2/lib/assets/compiled
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/activestorage-5.2.4.2/app/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/actionview-5.2.4.2/lib/assets/compiled
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/turbolinks-source-5.2.0/lib/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/rails-ujs-0.1.0/dist
  /Users/mabhishek/rails_projects/instagram/node_modules
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/stylesheets
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/javascripts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/fonts
  /Users/mabhishek/.rvm/gems/ruby-2.5.1/gems/bootstrap-sass-3.4.1/assets/images):
    11:     <%= csrf_meta_tags %>
    12:     <%= csp_meta_tag %>
    13:     < link="vendor/assests/stylesheets/bootstrap.min.scss" rel="stylesheets">
    14:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    15:     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    16: </head>
    17:   <body>

app/assets/stylesheets/application.css:14
app/views/layouts/application.html.erb:14:in `_app_views_layouts_application_html_erb__895371573775794232_70354650107640'

config/application.rb の追加

require_relative 'boot'

require 'rails/all'
require 'sprockets/railtie'

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module InstagramClone
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.
  end
end

こちらがassets.rbです

# Be sure to restart your server when you modify this file.

# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'

# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
# Add Yarn node_modules folder to the asset load path.
Rails.application.config.assets.paths += [
  Rails.root.join('vendor', 'assets').to_s
]

# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css )

誰か助けてくれませんか。

解決策

application.js や @import “css/file” などの JavaScript ファイルでは //= require js/file を使用します。 application.scss のようなスタイルシート。