使用 Webpack 在 Rails 6 上设置 Bootstrap 4.3

Question

我正在尝试让 Rails 6.0.0 和 Bootstrap 4.3 与 webpack 一起工作。我尝试了一些像这个 tutorail1 and this one tutorial2 这样的教程，但没有完全奏效。目前 bootstrap 导航在将鼠标悬停在任何链接上时有一个黑框，工具提示和弹出窗口在为它们添加脚本后也不起作用。

yarn add bootstrap jquery popper.js

config/webpack/environment.js

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

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

module.exports = environment

app/javascript/packs/application.js

require("bootstrap/dist/js/bootstrap")

app/assets/stylesheets/application.scss

@import "bootstrap/scss/bootstrap";

Answer 1

这来自 app/assets/stylesheets/scaffolds.scss 如果您生成了脚手架。您可以删除该文件。

脚手架样式表在悬停链接时添加黑色背景，以及一些会与 Bootstrap 或任何其他 CSS 框架冲突的其他样式。

使用 Webpack 在 Rails 6 上设置 Bootstrap 4.3

Setup Bootstrap 4.3 on Rails 6 using Webpack

ruby-on-rails

webpack

bootstrap-4

ruby-on-rails-6