Ruby on Rails 6.0 (RC1) 使用 Bootstrap 4.3.1 在 Safari 上正确呈现，但似乎在 Chrome 上呈现页面两次(如此显示)，首先不使用 Bootstrap CSS 信息，然后应用 Bootstrap 格式。有几分之一秒的时间，我可以看到页面在重新格式化之前的“原始”格式。
Windows 上的 Chrome:相同的结果，呈现两次/闪烁 边缘:工作正常 Windows 上的 Firefox:像 Chrome 一样行为不端
正常工作是指它在呈现页面时不会闪烁。
这是我做的。
- 创建一个新的 RoR 应用程序
rails new test600
- 创建 Controller
cd test600
rails g controller main index
- 安装 Bootstrap、JQuery 和 Popper
yarn add bootstrap@4.3.1 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('jquery')
require('bootstrap/dist/js/bootstrap.js')
require('bootstrap/dist/css/bootstrap.css')
- 将 app/views/layouts/application.html 编辑为
<!DOCTYPE html>
<html>
<head>
<title>Test600WithBootstrap</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
<%= yield %>
</body>
</html>
- 启动应用程序，无论是 rails s 还是 puma，都给出相同的结果。
最佳答案
这是一个称为 Flash Of Unstyled Content (FOUC) 的问题.这可能是由于您在 application.js 中的 require('bootstrap/dist/css/bootstrap.css') 会在页面加载时异步下载 CSS 文件，而不是阻止页面加载下载样式表并应用其样式。
关于ruby-on-rails - Chrome 渲染页面两次，而 Safari 按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56059910/