Question

Ruby on Rails 6.0（RC1）在Safari上使用Bootstrap 4.3.1可以正确呈现，但似乎在Chrome上呈现了两次页面（因此出现），首先不使用Bootstrap CSS信息，然后应用Bootstrap格式。在不到一秒钟的时间内，我可以看到该页面以“原始”格式重新格式化之前。

Windows上的Chrome：结果相同，呈现两次/闪烁边缘：正常工作 Windows上的Firefox：行为像Chrome一样

正常工作是指呈现页面时它不会闪烁。

这就是我所做的。

创建一个新的RoR应用程序

  rails new test600

创建控制器

  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还是puma，都将得到相同的结果。

Answer 1

这是一个称为Flash Of Unstyled Content (FOUC)的问题。这可能是由于您的application.js中的require('bootstrap/dist/css/bootstrap.css')，它在页面加载时异步下载CSS文件，而不是在下载样式表及其样式时阻止页面加载。

Answer 2

为了向Greg Burghardt's response致敬并帮助将要降落在这里的人们，我想补充两条对我有帮助的提示。

验证是否使用stylesheet_pack_tag代替stylesheet_link_tag（或在application.html.erb之前）{}。
在extract_css: true（source）上设置config/webpacker.yml。

Chrome两次呈现页面，而Safari正常运行

2 个答案: