Не подключены Bootstrap 4 и jQuery в Ruby on Rails 6

Question

Установлены Bootstrap 4 и jQuery, ошибки в DevTools

Этапы установки:

1 - Выполнена консольная команда yarn add bootstrap@4.3.1 jquery popper.js

2 - добавлено в файл config / webpack / environment.js

const {environment} = require ('@ rails / webpacker')

const webpack = требуется ('webpack')
environment.plugins.append ('Обеспечить', новый webpack.ProvidePlugin ({
  $: 'jquery',
  JQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

3 - добавлено в файл app / javascript / packs / application.js

import  'bootstrap' 
import  '../stylesheets/application.scss'

4 - создано приложение папки/ javascript / packs / stylesheets и созданный файл application.scss, напишите в нем @import '~bootstrap/scss/bootstrap';

После запуска сервера в панели разработчика представленные выше ошибки

Использовали rails 6, ruby ​​2.6.3, windows 10

Мой гемфайл:

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0.rc1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

Answer 1

Я вижу несколько потенциальных проблем ...

1. В config/webpack/environment.js ... JQuery: 'JQuery' должно быть JQuery: 'jquery', чтобы соответствовать имени библиотеки.

2. В app/javascript/packs/application.js у вас есть ...

   import './stylesheets/application.scss'

   Это должно быть на один уровень выше, поэтому попробуйте переместить его в новый каталог ...

   app/javascript/stylesheets/application.scss

   и изменить его на

   import '../stylesheets/application.scss'