3

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

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

正常工作我的意思是它在渲染页面时不会闪烁。

这就是我所做的。

  1. 创建一个新的 RoR 应用程序
  rails new test600
  1. 创建控制器
  cd test600
  rails g controller main index
  1. 安装 Bootstrap、JQuery 和 Popper
  yarn add bootstrap@4.3.1 jquery popper.js
  1. 编辑 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
  1. 编辑 app/javascript/packs/application.js 并添加
require('jquery')
require('bootstrap/dist/js/bootstrap.js')
require('bootstrap/dist/css/bootstrap.css')
  1. 编辑 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>
  1. 启动应用程序，无论是 rails 还是 puma，都给出相同的结果。
4

3 回答 3

3

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

于 2019-05-09T13:00:45.620 回答
1

为了恭维Greg Burghardt 的回应并帮助将在这里登陆的人们，我想添加两个对我有帮助的提示。

  1. 验证您是否使用insine youtstylesheet_pack_tag代替（或旁边）。stylesheet_link_tagapplication.html.erb

  2. 设置extract_css: true在config/webpacker.yml（源）。

于 2019-10-10T01:37:46.047 回答
1

什么不起作用：

这样做会产生无样式的内容。

// app/javascript/styles/application.js
import("bootstrap/dist/css/bootstrap");

什么工作：

// app/javascript/styles/application.js
import 'styles/site'

// app/javascript/styles/site.scss
@import "bootstrap/dist/css/bootstrap";

在 config/webpacker.yml

 extract_css: true

参考

这需要一些试验和错误。

  • @DiegoStiehl 的回答很有帮助
  • 这个对相关问题的回答说要创建至少一个css文件并导入它，所以我尝试了（引导文件，但大概你可以使用任何文件）
  • 这篇文章向我展示了如何做到这一点
于 2022-02-08T14:16:32.413 回答