ruby-on-rails - 在 Rails 6 上添加 Bootsrap 4

Question

我最近在网上阅读了很多关于如何在新版本的 Rails 上成功安装 bootstrap 4 的教程。

这是我到目前为止所采取的步骤：

1. yarn add bootstrap jquery popper.js

2. 在 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
   

3. 在 app/javascript/packs/application.js 添加以下内容：

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

4. 在 app/assets/stylesheets/application.css 添加以下内容：

   @import "bootstrap/scss/bootstrap";
   

我还尝试在同一个 scss 文件夹中添加 custom.scss 文件（_custom.scss 文件），并尝试更改背景颜色（如果有的话）。

只是为了看看引导程序是否正在运行，我添加了一个类表 table-dark 但没有工作。

知道我在这里想念什么吗？

标签： ruby-on-railsruby-on-rails-6

Answer 1

您只需要在单独的选项卡中运行它：

./bin/webpack-dev-server

如果之后您从 webpacker 收到“编译成功”消息，那么您就可以开始了！否则，它将显示您需要修复的错误，以便资产能够正确编译和加载。