使用 Webpack 在 Rails 6 上设置 Bootstrap 4.3

Posted 2023-03-07

【中文标题】使用 Webpack 在 Rails 6 上设置 Bootstrap 4.3

【英文标题】：Setup Bootstrap 4.3 on Rails 6 using Webpack

【发布时间】：2020-01-25 03:05:16

【问题描述】：

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

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";

【参考方案1】：

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

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