Ruby 关于 Rails CSS/JS Turbolinks 错误

Question

我正在 ROR5 上构建网络应用程序，layout/design 已全部完成，CSS/JS 文件已完成。但是当我打开应用程序，单击一个 link 并浏览网站时，CSS 无法加载。更具体地说，CSS 都搞砸了。例如，假设我从 'Home' -> 'Page A'，然后如果我再次退格到 'Home'（或单击徽标导航到 'Home'），'Home' 页面会乱七八糟。只有当我刷新页面时，我才会得到正确的显示。

起初我以为是缓存问题，但很快发现是这一行引起了问题：

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

删除此行后，显示问题不再存在。但是，所有 JS effects/JS-based 插件都无法使用。我有一个文本编辑器、一些 jQuery 动画和选项卡导航，当我删除该行时，它们都不起作用。 + 当然，除了删除该行，我还尝试通过以下方式简单地禁用 turbolinks： <%= javascript_include_tag 'application' %> 并从我的 Gemfile 中删除 turbolinks。这也没有用。

我的 Gemfile 包括： gem 'turbolinks', '~> 5' gem 'coffee-rails', '~> 4.2' gem'jquery-rails'

其余的 GEM 都是我前端的标准 gem（bootstrap、SASS、字体很棒等）。

我的application.js看起来像这样：

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require tinymce
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

作为参考，我的 application.html.erb 包含如下内容：

<head>
    <title>..</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= stylesheet_link_tag params[:controller] %>

    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Adobe Typekit Scripts -->
    <script src="https://use.typekit.net/ovy4zfg.js"></script>
    <script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>

可能是什么问题？谢谢。

Answer 1

我认为这里的问题是您正在加载特定于控制器的样式表 (<%= stylesheet_link_tag params[:controller] %>)。 Turbolinks 将附加新的样式表，但不会删除那些在后续页面加载中不存在的样式表。所以这是流程：

用户访问首页
Home 控制器的样式表已加载
用户访问页面 A
页面 A 的控制器的样式表已加载 在主页 之后 CSS
主页 CSS 和页面 A CSS 将保留在 head

如果可能，请将所有 CSS 包含在 application.css 清单文件中。如果您有一些特定于控制器的样式，请尝试在正文中添加 class，例如：

<body class="<%= controller_name %>">

然后您可以确定您的样式范围，例如pages_controller:

body.pages {
  …
}

或者您可以将 data-turbolinks-track="reload" 添加到您的 CSS link 标签：

<%= stylesheet_link_tag params[:controller], 'data-turbolinks-track': 'reload' %>

但是，这意味着您只能在使用相同控制器的页面之间导航时才能获得 Turbolinks 的好处。在使用不同控制器的页面之间导航时，您将获得完整的页面加载。这是因为 Turbolinks 将跟踪 CSS 是否存在并在它发生变化时重新加载。

最后一件事：将 'data-turbolinks-track': 'reload' 添加到您的 application.css 通常是个好主意，这样如果您发布 CSS 的新版本，网站上的用户更改生效时将是最新的。

希望对您有所帮助

Answer 2

对于带着稍微不同问题来到这里的人：

当您的应用程序的不同区域使用不同的 CSS 文件时（例如，application.css 用于您的常规应用程序，admin.css 用于您的管理区域），Turbolinks当它们不在单独的（子）域中时，无法正确处理它们。

因此，当 /admin 使用与应用程序其余部分不同的 CSS 文件时，单击 link 到 /admin/posts，然后使用后退按钮导航回 /，将使用错误的 CSS 文件。

在这种情况下，您需要为 Turbolinks 设置根位置。

来自docs：

By default, Turbolinks only loads URLs with the same origin — i.e. the same protocol, domain name, and port — as the current document. A visit to any other URL falls back to a full page load.

In some cases, you may want to further scope Turbolinks to a path on the same origin. For example, if your Turbolinks application lives at /app, and the non-Turbolinks help site lives at /help, links from the app to the help site shouldn’t use Turbolinks.

Include a <meta name="turbolinks-root"> element in your pages’ <head> to scope Turbolinks to a particular root location. Turbolinks will only load same-origin URLs that are prefixed with this path.

要使我示例中 /admin 下的管理区域正确显示 CSS，请在布局的 <head>.

中包含 <meta name="turbolinks-root" content="/admin">

Answer 3

同样试过，重装Webpacker还是报错

Webpacker 在 C:/Users/Admin/friends/public/packs/manifest.json 找不到应用程序。可能的原因：

您想要将编译的 webpacker.yml 值设置为适用于您的环境的 true 除非你使用 webpack -w 或 webpack-dev-server.
webpack 尚未重新运行反映更新。
您错误配置了 Webpacker 的 config/webpacker.yml 文件。
您的 webpack 配置没有创建清单。您的清单包含： { }

Ruby 关于 Rails CSS/JS Turbolinks 错误

Ruby on Rails CSS/JS error with Turbolinks

ruby-on-rails

turbolinks