使用Webpack在Rails 6上设置Bootstrap 4.3

Question

我正在尝试使Rails 6.0.0和Bootstrap 4.3与Webpack一起使用。我尝试了一些像这样的tutorail1和这个tutorial2的tutorails，但是没有任何事情能完全起作用。当前，引导导航将鼠标悬停在任何链接上时会显示一个黑框，并且在为它们添加脚本后，工具提示和弹出窗口也不起作用。

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框架冲突的样式时，脚手架样式表会添加黑色背景。