ruby-on-rails - 使用 Webpack 在 Rails 6 上设置 Bootstrap 4.3

Question

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

yarn add bootstrap jquery popper.js

配置/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

应用程序/javascript/packs/application.js

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

应用程序/ Assets /样式表/application.scss

@import "bootstrap/scss/bootstrap";

Answer 1

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

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