Таблица стилей сломана при загрузке разного макета в разных контроллерах

Привет, у меня странная проблема.

Когда я нажал три страницы, показанные на следующих трех изображениях

Шаг 1 контроллер приветствуется

Шаг 2 другие контроллеры

Шаг 3, вернитесь к контроллеру представления step1

Последнее изображение, когда я вернулся к controller welcome от other controllers то есть шаг 2 - шаг 3.

Таблицы стилей были кэшированы браузером,

Макет шага 3 отличается от макета шага 1.

Но это одна и та же страница. Как это может быть, кажется, браузер кеширует CSS-файлы?

Я добавляю две папки ресурсов, используемых двумя макетами, в application.rb config.assets.paths << "#{Rails.root}/vendor/themes"

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

Добавил welcome.html.haml в папке раскладок, чтобы welcome_controller можно загрузить этот макет

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

Весь исходный код я положил здесь https://gist.github.com/poc7667/0198b973fce0fbf4dd26

Страница А: ОК введите описание изображения здесь Страница 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

Я открываю firebug, чтобы увидеть включенные CSS-файлы и обнаружил, что мне нужно перезагрузить страницу, чтобы загрузить ожидаемые CSS-файлы. Как это исправить?

введите описание изображения здесь

Обновить

Когда я перезагрузил страницу, консоль показала, что эти 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)

Источник

1 ответ

Решение
How could it be, it seems the browser caches the css files ?

Turbolinks

Это может показаться, если вы используете Turbolinks - который загружает новую версию <body> тег (оставляя <head>). Это заставит ваш браузер использовать тот же CSS каждый запрос (где turbolinks стреляет) проблема будет присутствовать только если вы используете тот же layout

Это может не быть проблемой (если вы меняете макеты, обновляется вся страница)

Чтобы проверить это, отключите турболинки:

#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 работал)

Можете ли вы поделиться своими макетами и как вы называете их в ваших контроллерах?

Источник
Другие вопросы по тегам