带导轨的引导程序 6

Eoi*_*in 5 ruby-on-rails twitter-bootstrap

我正在尝试让引导程序在我的 rails 6 Web 应用程序中工作,但它不起作用。我在 youtube 和这里​​学习了多个教程,但似乎没有任何效果。任何我可能出错的帮助将不胜感激。

Gemfile:(包括引导程序的前半部分)

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

ruby '2.6.5'
gem 'jquery-rails'
gem 'coffee-script-source', '~> 1.11', '>= 1.11.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.2', '>= 6.0.2.2'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sass-rails', '>= 6'
Run Code Online (Sandbox Code Playgroud)

应用程序.js:

require("@rails/ujs").start()
require jquery
require bootstrap-sprockets
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
Run Code Online (Sandbox Code Playgroud)

应用程序.scss:

@import "bootstrap-sprockets";
@import "bootstrap";
Run Code Online (Sandbox Code Playgroud)

这是我运行时的结果: 在此处输入图片说明

has*_*ket 9

我相信在 Rails 6 中,添加 Bootstrap 的公认方式是通过 Webpack。您可以yarn add bootstrap jquery popper.js在终端中运行。然后,将其添加到environment.js现有constmodule.exports调用之间的文件中:

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))
Run Code Online (Sandbox Code Playgroud)

然后,在您app/javascript/packs/application.js添加这一行:

require("bootstrap/dist/js/bootstrap")
Run Code Online (Sandbox Code Playgroud)

最后,在你app/assets/stylesheets/application.css添加这一行:

@import "bootstrap/scss/bootstrap";
Run Code Online (Sandbox Code Playgroud)