32643


RailsでのCSS読み込みについて質問させて頂きます。  
現在、ページに対しリダイレクト処理がかかった際に  
一瞬CSS未適用状態のページが表示されております。(FOUC)  
F5キー等による更新処理時、初回表示時には発生はしておりません。

お手数ですが、原因が分かる方がおりましたら解決策をお願い致します。

■ 発生ブラウザ  
IE： 発生  
Firefox: 発生  
Chrome: 発生

■ 現状の実装は以下のようになっております。

app/controllers/books_controller.rb

[code]

    def index
    　　@books = Book.all
    end
    
[/code]

app/views/layouts/application.html.slim

[code]

    DOCTYPE
    html
      head
        == render 'layouts/asset'
        title
        body
          == render 'layouts/header'
    
          .container
            - flash.each do |key, value|
              = content_tag :div, value, class: "alert alert-#{key}"
            .row
              .col-md-offset-2.col-md-8
                == yield
    
[/code]

app/views/layouts/_asset.html.slim

[code]

    =stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
    =javascript_include_tag 'application', 'data-turbolinks-track' => true
    =csrf_meta_tags
    
[/code]

app/views/layouts/_header.html.slim

[code]

     = navbar id: 'header' do
        = vertical do
          = link_to 'Top', root_path　#FOUC発生
        = horizontal do
          = nav class: 'navbar-right' do
            = link_to '書籍一覧', books_path #FOUC発生
            = link_to 'ログアウト', destroy_user_session_path, method: :delete #FOUC発生
    
[/code]

app/assets/stylesheets/application.scss

[code]

    @import 'bootstrap';
    @import 'bootstrap-sprockets';
    @import 'font-awesome';
    @import 'select2';
    @import 'select2-bootstrap';
    
[/code]


CC BY-SA 3.0
2017-02-11T07:17:00.993
32584
2018-03-19T18:18:56.177
2017-02-11T23:15:40.517
20612
20612
question
ruby-on-rails
CSS未適用ページが一瞬表示される問題


レイアウトビューのbody要素はhtml要素の子要素にしてください。  
不正常な階層構造の影響でturbolinksが誤作動して、アセットが一時的にリセットされたのだと思われます。

app/views/layouts/application.html.slim

[code]

    DOCTYPE
    html
      head
        == render 'layouts/asset'
        title
      body
        == render 'layouts/header'
        ...
    
[/code]


CC BY-SA 3.0
2017-02-13T15:32:13.047
32643
2017-02-13T15:32:13.047
19925
32584
answer


assets precompileを行うことで解消することができました。[SabaMotto
さんの方法](https://ja.stackoverflow.com/a/32643/19110)では解決しませんでした。

\--
質問者さんの[コメント](https://ja.stackoverflow.com/questions/32584/css%E6%9C%AA%E9%81%A9%E7%94%A8%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8C%E4%B8%80%E7%9E%AC%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C#comment32112_32643)より


CC BY-SA 3.0
2018-03-19T18:18:56.177
42503
2018-03-19T18:18:56.177
19110
32584
answer