页面重新加载后出现 Rails css 问题



在rails方面,我不是专家,我的应用程序运行良好,但是突然间,当我重新加载任何页面时,在第一毫秒它显示没有编译的css,然后一切都很好。 我不知道如何很好地解释它,但是每次我重新加载页面时都会让我烦恼。

有人遇到过这个问题或有解决方法吗?

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<%= 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' %>
</head>
<body>
<%= render 'shared/flash_messages' %>
<%= render 'shared/navbar' %>
<main class="container-fluid">
<%= content_for?(:content) ? yield(:content) : yield %>
</main>
</body>
</html>
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("stylesheets/application")
import "bootstrap"
app/javascript/stylesheets/application.scss
$theme-colors: (
"primary": #4299E1,
// Gray colors
"gray-100": #F7FAFC,
"gray-200": #EDF2F7,
"gray-300": #E2E8F0,
"gray-400": #CBD5E0,
"gray-500": #A0AEC0,
"gray-600": #718096,
"gray-700": #4A5568,
"gray-800": #2D3748,
"gray-900": #1A202C,
// Blue Colors
"blue-100": #EBF8FF,
"blue-200": #BEE3F8,
"blue-300": #90CDF4,
"blue-400": #63B3ED,
"blue-500": #4299E1,
"blue-600": #3182CE,
"blue-700": #2B6CB0,
"blue-800": #2C5282,
"blue-900": #2A4365,
// Red colors
"red-100": #FDEEEE,
"red-200": #FAD4D5,
"red-300": #F7B9BB,
"red-400": #F28589,
"red-500": #EC5156,
"red-600": #D4494D,
"red-700": #8E3134,
"red-800": #6A2427,
"red-900": #47181A,
// Green colors
"green-100": #EFF9F4,
"green-200": #D7F1E4,
"green-300": #BEE9D4,
"green-400": #8ED8B3,
"green-500": #5DC793,
"green-600": #54B384,
"green-700": #387758,
"green-800": #2A5A42,
"green-900": #1C3C2C,
);
@import '~bootstrap/scss/bootstrap';

问题出在webpacker上,我用webpacker使用bootstrap,相反,我已经切换到bootstrap-rubygem并且它运行良好。

最新更新