【发布时间】：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，您会看到资产编译速度大幅提升。
标签： css ruby-on-rails ruby twitter-bootstrap webpack