Heroku上のページにアクセスするときに「ActionView :: Template :: Error：無効なCSSが発生する」

Question

私はHerokuホスティング環境でRails 4を使用しています。私はHeroku（そしてローカルではない）の下でうんざりなエラーを得ているし、私はそれが何を意味するか分からない。

2016-03-23T19:19:13.786503+00:00 app[web.1]: I, [2016-03-23T19:19:13.786423 #10] INFO -- : Started GET "https://stackoverflow.com/users/3/edit" for 216.216.68.69 at 2016-03-23 19:19:13 +0000 
2016-03-23T19:19:13.810807+00:00 app[web.1]: Processing by UsersController#edit as HTML 
2016-03-23T19:19:13.810837+00:00 app[web.1]: Parameters: {"id"=>"3"} 
2016-03-23T19:19:13.941686+00:00 app[web.1]: D, [2016-03-23T19:19:13.941579 #10] DEBUG -- : User Load (4.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT 1 [["id", 3]] 
2016-03-23T19:19:14.033037+00:00 app[web.1]: D, [2016-03-23T19:19:14.032952 #10] DEBUG -- : AvatarFile Load (2.4ms) SELECT "Avatar_files".* FROM "Avatar_files" 
2016-03-23T19:19:14.972908+00:00 heroku[router]: at=info method=GET path="https://stackoverflow.com/users/3/edit" host=myapplication.herokuapp.com request_id=08750a35-37ea-4089-8894-dab950320fa7 fwd="216.216.68.69" dyno=web.1 connect=0ms service=1193ms status=500 bytes=154 
2016-03-23T19:19:14.975845+00:00 app[web.1]: Rendered users/edit.html.erb within layouts/application (982.0ms) 
2016-03-23T19:19:14.976082+00:00 app[web.1]: Completed 500 Internal Server Error in 1165ms (ActiveRecord: 22.6ms) 
2016-03-23T19:19:14.976333+00:00 app[web.1]: 2016-03-23 19:19:14 +0000: Rack app error: #<ActionView::Template::Error: Invalid CSS after "...-------------*/": expected selector or at-rule, was ".ui-widget {"> 
2016-03-23T19:19:14.976404+00:00 app[web.1]: (sass):298 

ここ

呼び出されている「./app/views/users/edit.html.erb」ページがある...私は名前のファイルに「UIウィジェット」への参照を参照してください

<%= stylesheet_link_tag "users" %> 
<%= stylesheet_link_tag "formFields" %> 

<div id="profile" class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
    <%= form_for(@user, :method => :put) do |f| %> 

    <h2>Tell Us More ...</h2> 

     <div class="profileField"> 
     Height 
     <%= f.text_field :height_feet, :size=>"2", class: 'form-control' %> ft. 

     <%= f.text_field :height_inches, :size=>"2", class: 'form-control' %> in. 
     </div> 

     <div class="profileField"> 
     <%= f.label :weight %> 
     <%= f.text_field :weight, :size=>"3", class: 'form-control' %> lbs. 
     </div> 

     <div class="profileField"> 
    <%= f.hidden_field :avatar_file_id %> 
    Choose Your Avatar 
     <p><% @Avatar_files.each do |image| %> 
     <%= image_tag "avatar_images/#{image.file.split('/').last}", height:100, class:”avatar_file #{image.id == f.object.avatar_file_id ? 'selected' : ''}", :data => { :id => image.id } %> 
     <% end %></p> 
     </div> 

     <div class="profileField"> 
    <%= f.submit "Save", :method => :put, :class => 'button' %> 
     </div> 
    <% end %> 

    </div> 
</div> 

"./public/assets/application-14d0c3dc29cdd54dd0c7b279da75470cf63fd410286c0b5d00f5c1254c6c79e3.css"のようなものですが、これらのどれも私自身は作成していません。私はこの邪魔なエラーを克服するために何をする必要がありますか？

編集：「アプリ/資産/スタイルシート/」ディレクトリからファイルが

アプリ/資産/スタイルシート/ application.css

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any styles 
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new 
* file per style scope. 
* 
*= require_tree . 
*= require_self 
*= require jquery-ui 
*/ 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
@import 'bootstrap/theme' 

アプリ/資産/スタイルシート/フォームフィールドです。 css.scss

input[type=text] { 
     font-size:  20px; 
     font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; 
     padding: 10px; 
     border: solid 1px #dcdcdc; 
     transition: box-shadow 0.3s, border 0.3s; 
} 

.styled-select select { 
    background: transparent; 
    width: 268px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
} 

.styled-select { 
    width: 240px; 
    height: 34px; 
    overflow: hidden; 
    background: asset-data-url('down_arrow_select.jpg') no-repeat right #ddd; 
    border: 1px solid #ccc; 
} 


.button { 
    margin: 0 0 5px; 
    padding: 0 12px; 
    height: 28px; 
    line-height: 28px; 
    font-size: 18px; 
    font-weight: bold; 
    color: #555555; 
    text-decoration: none; 
    text-shadow: 0 1px white; 
    background: #dfdfdf; 
    border-width: 1px 1px 0; 
    border-style: solid; 
    border-color: #cecece #bababa #a8a8a8; 
    border-radius: 3px 3px 2px 2px; 
    outline: 0; 
    display: inline-block; 
    vertical-align: baseline; 
    zoom: 1; 
    *display: inline; 
    *vertical-align: auto; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
    background-image: -moz-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
    background-image: -o-linear-gradient(top, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
    background-image: linear-gradient(to bottom, #f1f1f1 0%, #dfdfdf 70%, #dadada 100%); 
    -webkit-box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25); 
    box-shadow: inset 0 1px #fdfdfd, inset 0 0 0 1px #eaeaea, 0 1px #a8a8a8, 0 3px #bbbbbb, 0 4px #a8a8a8, 0 5px 2px rgba(0, 0, 0, 0.25); 
} 

.button:hover, .button:active { 
    background: #dfdfdf; 
    border-top-color: #c9c9c9; 
} 

.button:active, .button.green:active, .button.blue:active, .button.yellow:active, .button.red:active, .button.purple:active, .button.grey:active, .button.black:active { 
    vertical-align: -5px; 
    margin-top: 5px; 
    margin-bottom: 0; 
    padding: 1px 13px 0; 
    border-width: 0; 
    border-radius: 3px; 
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white; 
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white; 
} 

アプリ/資産/スタイルシート/ home.css.scss

あなたの app/assetsと vendor/assets下のファイルとこれらの資産を提供あらゆる宝石から Rails's asset pipelineによって生成されたファイル

.totalHeading { 
    font-family: Gill Sans, Verdana; 
    font-size: 18px; 
    line-height: 14px; 
    letter-spacing: 2px; 
    font-weight: bold; 
    margin: 10px; 
} 

.totalNumber { 
    font-family: times, Times New Roman, times-roman, georgia, serif; 
    color: #444; 
    margin: 0; 
    padding: 0px 0px 6px 0px; 
    font-size: 51px; 
    line-height: 44px; 
    letter-spacing: -2px; 
    font-weight: bold; 
} 

#container { 
     display: block; 
     font-size: 0; 
     margin-left: auto; 
     margin-right: auto; 
     text-align: center; 
} 

#left { 
    display: inline-block; 
    font-size: 16px; 
    margin: 5px; 
} 

#right { 
    display: inline-block; 
    font-size: 16px; 
    vertical-align: top; 
    margin: 5px; 
} 

アプリ/資産/スタイルシート/ users.css.scss

.profileField:before { 
    content:''; 
    display: block; 
} 

.profileField { 
    margin: 30px; 
    font-size:  30px; 
    font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; 
} 

#profile { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    text-align:center; 
} 

.avatar_file { 
    cursor: pointer; 
} 

.unselected { 
    border: none; 
} 

.selected { 
    border: solid 2px red; 
} 

Answer 1

。

そこに表示されるように、アセットはプロダクションで別々に処理されます。ここでの問題は、Herokuとローカルの違いではなく、開発対生産についてです。

問題は、Sprocketsインクルードと.cssファイルのSCSSインクルードを組み合わせていることです。私はなぜ、どのように実際に開発中に働いたのかは分かりません。

がエラーあなたが取得していることが判明：

Invalid CSS after "...-------------*/": expected selector or at-rule, was ".ui-widget {">

その終了コメントが無効になった後...部分的にしか権利、間違いなくCSSで、私はそれが.ui-widget {としてそれを報告している理由はわかりません@import "bootstrap...としてではありませんが、とにかく、それは問題です。

@import ...構文はSCSS構文ですが、.cssファイル内で使用しており、有効なCSS構文ではありません。したがって、基本的にどちらかを選択してください：

.cssファイルを使用する場合は、Sprockets *= requireディレクティブを使用してください。

.scssファイルを使用する場合は、SCSS @importディレクティブを使用してください。

Answer 2

あなたのGemfileがそこにどのようにセットアップされているかを確認することは役に立ちますが、私は問題の一部が前述の.CSSと.SCSSにあると思いますが、ヘロクではなく、あなたのために。

その答えは、システムが恐らく何かを実行しているのに対して、それはHerokuがPostgresを実行していることと関係していると思います。私はこれもプロジェクトで問題が発生したことを知っています。