Ruby on Rails与Turbolinks的CSS/JS错误

我正在ROR5上构建一个Web应用程序，并且布局/设计全部完成，CSS/JS文件已完成。但是，当我打开应用程序，点击一个链接，浏览网站，CSS无法加载。更具体地说，CSS全部搞砸了。例如，假设我从'首页' - >'页面A'，然后如果我再次退格到'首页'（或点击徽标导航到'主页'），则'主页'页面将会混乱。只有当我刷新的页面，我才会得到正确的显示。Ruby on Rails与Turbolinks的CSS/JS错误

起初我还以为这是一个缓存的问题，但很快就发现，这条线是造成问题：

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

当我删除这条线，显示问题已经不再存在。但是，所有JS效果/基于JS的插件都无法工作。我有一个文本编辑器，几个jQuery动画和标签导航，当我删除该行时，这些都不起作用。 +当然，我并不是简单地删除该行，而是试着简单地禁用turbolinks： <％= javascript_include_tag'application'％> 并从我的Gemfile中删除turbolinks。这也没有奏效。

我的Gemfile包括：宝石 'turbolinks'， '〜> 5' 宝石 '咖啡轨'， '〜> 4.2' 宝石 'jQuery的轨道'

，其余宝石我前端的所有标准宝石（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>

可能是什么问题？谢谢。

来源

2017-06-21 sofarsophie

我认为这里的问题是你正在加载控制器特定的样式表（<%= stylesheet_link_tag params[:controller] %>）。 Turbolinks将追加新的样式表，但不会删除后续页面加载中不存在的样式表。因此，这里的流量：

用户访问首页
样式为主页的加载器
用户访问网页一个
样式为家庭CSS
首页CSS加载后页面A的控制器和Page A CSS将保留在head

如果可能，将所有CSS包含在application.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，则当更改发布时，网站上的用户将会是最新的生活。

希望有帮助

来源

2017-06-21 08:47:25

谢谢！我有很多样式的工作，所以我使用了替代方法，并添加了data-turbolinks-track =“reload”到我的CSS链接标签，完美地完成了这项工作！ :) – sofarsophie

Ruby on Rails与Turbolinks的CSS/JS错误

回答

相关问题