ruby-on-rails - 为什么我在 Rails 6 中的 Bootstrap 不起作用？

Question

我想在我的 Rails 应用程序中有一个模式/弹出窗口。最后甚至还有幻灯片/旋转木马。我遵循了几个教程，但都不起作用。例如:CrashingChandelier .此外，堆栈溢出的许多问题也无济于事，因为它们中的大多数都处理 js 文件。

本类(class)说它可以在不使用 Javascript 文件的情况下使用 Bootstrap-modal。虽然它应该很简单，但我无法修复它，我不知道如何调试它。所以请帮助我。

这是带有按钮和模态框的 index.html.erb。

<!-- BUTTON -->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<!--MODAL-->

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
            <div class="pull-left"><h4>Your picture gallery</h4></div>
              <button type="button" class="close" data-dismiss="modal" title="Close">
                <span class="glyphicon glyphicon-remove"></span>
              </button>
          </div>
    <div class="modal-body">

      <p>hello, world!</p>

    </div><!--end modal-body-->
        <div class="modal-footer">
        <div class="pull-left">
        </div>
          <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
      </div><!--end modal-footer-->
    </div><!--end modal-content-->
  </div><!--end modal-dialoge-->
</div><!--end myModal-->

这是我的application.scss

/*
 *
 */

@import "bootstrap-sprockets";
@import "bootstrap";

这是我的application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

这是我的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.3', '>= 6.0.3.4'

# Database

# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'

# Server

# Use Puma as the app server
gem 'puma', '~> 4.1'

# Layout
gem 'bootstrap-sass', '3.4.1'
gem 'jquery-rails'

# Popups
gem 'popper_js'

# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Manipulate images
gem 'image_processing',           '1.9.3'
gem 'mini_magick',                '4.9.5'

# Security

# Use Active Model has_secure_password
gem 'bcrypt'

# 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.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'

# 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.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'
  gem 'minitest'
  gem 'minitest-reporters'
  gem 'guard'
  gem 'guard-minitest'

  gem 'rails-controller-testing'
end

group :production do
  gem "aws-sdk-s3", require: false
end

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

如果我将“

最佳答案

如果您使用的是 Rails 6，请勿使用

gem 'bootstrap-sass', '3.4.1'
gem 'jquery-rails'

您需要通过 yarn 和 webpacker 安装 bootstrap。 方法如下:

1. 控制台:

yarn add jquery popper.js bootstrap
mkdir app/javascript/stylesheets
echo > app/javascript/stylesheets/application.scss

1. 环境.js:

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment

1. 在 application.html.erb 中添加(而不是替换):

= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 

1. 应用程序.js:

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")

现在您可以转到 bootstrap docs/modals并复制粘贴一个模式，它会起作用。

Source

06/2021 更新:Bootstrap 5 + Rails 6

控制台

yarn add bootstrap@next
yarn add @popperjs/core

应用程序.js

import 'bootstrap/dist/js/bootstrap'
import "bootstrap/dist/css/bootstrap";

没有别的需要。就是这样!

关于ruby-on-rails - 为什么我在 Rails 6 中的 Bootstrap 不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64636601/

Answer 1

如果您使用的是 Rails 6，请勿使用

gem 'bootstrap-sass', '3.4.1'
gem 'jquery-rails'

您需要通过 yarn 和 webpacker 安装 bootstrap。 方法如下:

1. 控制台:

yarn add jquery popper.js bootstrap
mkdir app/javascript/stylesheets
echo > app/javascript/stylesheets/application.scss

1. 环境.js:

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment

1. 在 application.html.erb 中添加(而不是替换):

= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 

1. 应用程序.js:

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")

现在您可以转到 bootstrap docs/modals并复制粘贴一个模式，它会起作用。

Source

06/2021 更新:Bootstrap 5 + Rails 6

控制台

yarn add bootstrap@next
yarn add @popperjs/core

应用程序.js

import 'bootstrap/dist/js/bootstrap'
import "bootstrap/dist/css/bootstrap";

没有别的需要。就是这样!