Question

嗨，我遇到了一个奇怪的问题。

当我点击以下三张图片中显示的三页时

第1步 控制器欢迎

第2步 其他控制器

步骤3，返回步骤1视图 控制器欢迎

最后一张图片，当我从controller welcome返回other controllers时，这是第2步到第3步。

样式表由浏览器缓存，

第3步布局与 step1 布局不同。

但它们是同一页面，怎么可能，浏览器似乎缓存了css文件？

我在application.rb中添加了两个布局使用的两个资源文件夹 config.assets.paths＆lt;＆lt; “＃{Rails.root} /供应商/主题”

    themes
├── ace-admin-theme
│   ├── avatars
│   ├── css
│   ├── font
│   ├── images
│   ├── img
│   └── js
└── lenord-single-page-theme
    ├── css
    ├── fonts
    ├── img
    ├── index.html
    ├── js
    └── rs-assets

在layouts文件夹下添加了welcome.html.haml，以便welcome_controller可以加载此布局

layouts
├── _header.html.haml
├── application.html.haml
└── welcome.html.haml

我放在这里的所有源代码https://gist.github.com/poc7667/0198b973fce0fbf4dd26

页面A：好的 enter image description here 页面B：好的 页面A：失败，页面B的样式表被缓存，它应该与原始页面A相同

当我评论data-turbolinks-track为css

时，它无法正常工作

奇怪的现象仍然存在。

--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -2,7 +2,7 @@
 %html
   %head
     %title VIVOTEK DQA DEVELOPER
-    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
+    = stylesheet_link_tag    "application", media: "all"
     = javascript_include_tag "application", "data-turbolinks-track" => true
     / Description, Keywords and Author
     / basic styles
diff --git a/app/views/layouts/welcome.html.haml b/app/views/layouts/welcome.html.haml
index 28d9c99..c3e6ec8 100644
--- a/app/views/layouts/welcome.html.haml
+++ b/app/views/layouts/welcome.html.haml
@@ -2,7 +2,7 @@
 %html
   %head
     %title VIVOTEK DQA DEVELOPER
-    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
+    = stylesheet_link_tag    "application", media: "all"
     = javascript_include_tag "application", "data-turbolinks-track" => true

我打开萤火虫看到包含的css文件，我发现我需要重新加载页面以加载预期的css文件。如何解决？

enter image description here

更新

当我重新加载页面时，控制台显示已加载这些css文件

Started GET "/assets/ace-admin-theme/css/bootstrap.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800
Started GET "/assets/ace-admin-theme/css/font-awesome.min.css" for 127.0.0.1 at 2014-05-19 14:33:49 +0800

当我点击超链接（通过url helper）到其他页面时，css将不会再次加载。

但实际上它应该再次加载css文件，因为一些控制器使用不同的布局和资产。

但更糟糕的是，如果我点击链接（由URLhelper生成），问题就会发生 But if I go to the page by typing the URL on the browser manually, it works fine!!

简而言之，css文件只在第一次加载，其他必要的css文件（对于其他布局）将不再加载。（如果我通过单击URLHelperLink查看页面），但它可以手动工作在浏览器上键入URL（例如：localhost：3000 / welcome，localhost：3000 / urlcommands）

Answer 1

How could it be, it seems the browser caches the css files ?

<强> Turbolinks

如果您使用的是Turbolinks，则可能会出现这种情况 - 它会加载<body>标记的新版本（离开<head>）。这将使您的浏览器在每个请求中使用相同的CSS（turbolinks正在触发）只有在您使用相同的layout时才会出现问题

这可能不是问题（如果您正在更改布局，整个页面将刷新）

测试方法是关闭turbolinks：

#app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", media: "all" %>

如果你这样做，Rails应该每次刷新你的整个页面。这样您就可以看到样式每次都会改变

<强> CSS

您可能遇到的另一个问题是如何调用CSS。如果你有第3步的不同布局 - 你打算使用不同的CSS吗？

就我个人而言，我会在不同的步骤中使用不同的造型。将它们合并到同一个电子表格中。

以下是我使用SASS的方式：

#app/assets/stylesheets/application.css.sass
.service
    .step1 
       //styling

    .step2
       //styling

    .step3
       //styling

<强>更新

我想这里的问题很可能是你的Turbolinks代码结构。我90％肯定会出现Turbolinks的问题（尤其是当你写“需要刷新”文档以使CSS工作时）

你能分享你的布局吗？你是如何在控制器中调用它们的？

在不同控制器中加载不同布局时样式表会中断

更新

1 个答案: