Question

我在ROR5上构建了一个Web应用程序，并且完成了布局/设计，最终确定了CSS / JS文件。但是当我打开应用程序时，单击一个链接，然后浏览网站，CSS无法加载。更具体地说，CSS全部搞砸了。例如，假设我从“家庭”出发。 - ＆GT; ＆＃39;页面A＆＃39;，然后如果我退回到＆＃39; Home＆＃39;再次（或点击徽标导航到＆＃39; Home＆＃39;），＆＃39; Home＆＃39;页面会搞砸了。只有当我刷新页面时，我才会得到正确的显示。

起初我认为这是一个缓存问题，但很快发现这一行导致了问题：

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

当我删除此行时，显示问题不再存在。但是，所有JS效果/基于JS的插件都不起作用。我有一个文本编辑器，一些jQuery动画和标签导航，当我删除该行时，它们都不起作用。 +当然，我还试图通过执行以下操作来简单地禁用turbolinks，而不是仅删除该行。＆lt;％= javascript_include_tag＆＃39;应用程序＆＃39; ％GT; 并从我的Gemfile中删除turbolink。这也没有用。

我的 Gemfile 包括：宝石＆＃39; turbolinks＆＃39;，＆＃39;〜＆gt; 5＆＃39; gem＆＃39; coffee-rails＆＃39;，＆＃39;〜＆gt; 4.2＆＃39; gem＆＃39; jquery-rails＆＃39;

其余的GEM都是我前端的标准宝石（bootstrap，SASS，font awesome等）。

我的 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会添加新的样式表，但不会删除后续页面加载中不存在的样式表。所以这是流程：

用户访问主页
已加载家庭控制器的样式表
用户访问第A页
在主页CSS

的样式表
主页CSS和页面CSS将保留在head
中
如果可能，请在application.css清单文件中包含所有CSS。如果您有一些特定于控制器的样式，请尝试向正文添加一个类，例如：

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

然后你可以调整你的风格范围，例如：对于pages_controller：

body.pages { … }

或者，您可以将data-turbolinks-track="reload"添加到CSS链接标记中：

<%= 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文件时，请单击指向/admin/posts的链接，然后使用“后退”按钮导航回/，将使用错误的CSS文件。

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

来自docs：

默认情况下，Turbolinks仅加载与当前文档具有相同来源（即相同的协议，域名和端口）的URL。对任何其他URL的访问都会恢复到整个页面的加载。

在某些情况下，您可能想进一步将Turbolinks范围定到同一原点上的路径。例如，如果您的Turbolinks应用程序位于/app，而非Turbolinks帮助站点位于/help，则从该应用程序到帮助站点的链接不应使用Turbolinks。

在页面的<meta name="turbolinks-root">中包含一个<head>元素，以将Turbolinks范围限定到特定的根位置。 Turbolinks将仅加载以该路径为前缀的同源URL。

要使示例中/admin下的管理区域正确显示CSS，请在布局的<meta name="turbolinks-root" content="/admin">中包含<head>。

Answer 3

尝试了同样的方法，重新安装 Webpacker 还是报错

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

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

使用Turbolinks的Ruby on Rails CSS / JS错误

3 个答案: