让 Ruby-on-Rails 6/Webpack + Bootstrap 一起正常工作的问题
Posted
技术标签:
【中文标题】让 Ruby-on-Rails 6/Webpack + Bootstrap 一起正常工作的问题【英文标题】：Issues getting Ruby-on-Rails 6/Webpack + Bootstrap working properly together 【发布时间】：2021-05-04 02:20:28 【问题描述】：我 10 年来第一次重新编写代码，并且总体上很享受这个过程，除了我试图让 Bootstrap 与 Rails6 一起工作的部分。
我已经完成了六个教程，但每个教程似乎都有稍微不同的方法，虽然我现在对整个过程的困惑比我开始时稍微少了一点，但我仍然无法获得我的 Rails 6应用程序以正确呈现某些 Bootstrap 样式（例如：卡片和下拉菜单未按预期呈现——但更改我的 Bootstrap/Webpack 配置使其正确显示，但其他内容会中断。）
我对整个复杂的过程感到非常沮丧，希望得到一些指导。
我的配置：
ruby -v
ruby 2.6.6p146 (2020-03-31 revision 67876) [x86_64-darwin20]
宝石文件
source 'https://rubygems.org'
git_source(:github) |repo| "https://github.com/#repo.git"
# https://devcenter.heroku.com/articles/ruby-versions
ruby '~> 2.6.6'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.1.1'
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like javascript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'redcarpet', '~> 3.5.1'
gem 'bootstrap-sass', '~> 3.4.1'
gem 'devise'
gem 'toastr-rails'
gem 'jquery-rails'
gem 'rails_admin', '~> 2.0'
gem 'cancancan'
（等等）
package.json
"name": "dcm",
"private": true,
"dependencies":
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.2.1",
"bootstrap": "^4.6.0",
"bootstrapper": "^0.1.3",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"toastr": "^2.1.4",
"turbolinks": "^5.2.0"
,
"version": "0.1.0",
"devDependencies":
"webpack-dev-server": "^3.11.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
应用程序.scss
@import 'bootstrap';
@import 'toastr';
应用程序.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "bootstrap"
//import 'bootstrap/dist/css/bootstrap.min.css';
import "../stylesheets/application"
global.toastr = require("toastr")
document.addEventListener("turbolinks:load", () =>
$('[data-toggle="tooltip"]').tooltip()
$('[data-toggle="popover"]').popover()
)
Rails.start()
Turbolinks.start()
ActiveStorage.start()
application.scss（目前已被注释掉）
// @import 'toastr';
// @import '~bootstrap/scss/bootstrap';
application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<title>XXXXX</title>
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta charset="utf-8">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
感谢您提供的任何见解，说明为什么这会导致我出现问题！
【问题讨论】：
mentalized.net/journal/2019/10/19/use-sass-modules-in-rails - 相同的设置适用于旧的 @import 指令。 谢谢 Max - 我以前没有看到任何迹象表明我需要一个不同的 sass 系统并且我没有编译问题。 sass-rails（Ruby 编译器）和 sassc-rails（libsass）gem 都已弃用。 Ruby 编译器已经 eol 很长时间了，而且速度很慢。 Libsass 最近贬值了，只剩下 Dart-sass。 Dart-sass 是唯一包含新的@use 指令的编译器，该指令替换了 @include，它最终会在您升级前端包时破坏您的应用程序。
谢谢 max - 现在我头疼...
如果您想要一个快速且临时的解决方案，请将 sass-rails 替换为 sassc-rails，您会看到资产编译速度大幅提升。
【参考方案1】：
伙计们，我想我已经想通了。我遵循了这个非常有帮助的教程，并且很好地解释了事情是如何工作的（并且让我相信我的配置在开发和生产中会始终如一地工作）：
https://www.vic-l.com/setup-bootstrap-in-rails-6-with-webpacker-for-development-and-production
但我也只是查看了生成和交付的 CSS 文件（通过 chrome 中的开发工具），并将它与我在代码中定义的引导类进行了比较，这些引导类基于我读过的各种教程，并发现有一些不匹配。因此，我还根据直接阅读我的 Bootstrap 版本的 Bootstrap 文档重新设计了我的 CSS，并设法解决了我的大部分问题。
感谢阅读:-)
【讨论】：
以上是关于让 Ruby-on-Rails 6/Webpack + Bootstrap 一起正常工作的问题的主要内容，如果未能解决你的问题，请参考以下文章