Rails 6 не подключается bootstrap 4 и jQuery

156
22 января 2021, 23:30

Выдает после установки bootstrap 4 и jQuery в панели разработчика ошибки

Устанавливаю:

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 - Создаю следующую папку app/javascript/packs/stylesheets и создаю файл ' application.scss и помешаю @import '~bootstrap/scss/bootstrap';

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

использую rails 6, ruby 2.6.3, windows 10 gemfile

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

У вас в третьем шаге ошибка.

В app/javascript/packs/application.js

Вы не поставили еще одну точку:

import  'bootstrap'
import  '../stylesheets/application.scss'
READ ALSO
В чем разница между div и span

В чем разница между div и span

Я новичок в программировании и хотелось бы досконально разобраться в чем разница между div и spanСтоит ли использовать только div или только span или...

133
Установка бесконечного таймера для переключения активного элемента

Установка бесконечного таймера для переключения активного элемента

Есть блок, в котором находится списокЕсть функция: при клике на элемент списка li меняется фон блока на соответствующий

114
Как скрыть элемент на время скролла страницы?

Как скрыть элемент на время скролла страницы?

Хочу скрывать блок пока пользователь находится в процессе пролистывания страницы и показывать его через пару секунд после остановки

92