質問: ローカルで動いていたRuby on RailsをAWS(PRODUCTION環境)に持って行き、 assets配下のファイルをプリコンパイルしようと、 下記を実行したのですが、エラーが出てしまいました。 一部の画像・JS・フォントはpublic/assetsにリネームされて移っていたので、 コード自体が間違っているわけではなく、悪さをするファイルがあるのだと考えています。 原因と対策についてご助言いただけないでしょうか。 ### 実行したコード ``` rake assets:precompile RAILS_ENV=production ``` ### 返ってくる内容 ``` rake aborted! Sass::SyntaxError: Invalid CSS after "...":3,"sources":[": expected "|", was ""bootstrap-them..." (in /var/www/rails/app_name/app/assets/stylesheets/application.css) (sass):1950 Tasks: TOP => assets:precompile (See full trace by running task with --trace) ``` ### 確認したこと 返ってきた内容に、""bootstrap-them..." とあるので、ファイル名にこの文字が含まれるファイルを確認すると app/assets/stylesheetsフォルダに > > bootstrap-theme.css > > bootstrap-theme.css.map > > bootstrap-theme.min.css > > bootstrap-theme.min.css.map > > > が入っていました。 application.cssには、 ``` *= require bootstrap-theme.min ``` と記述してあります。 (記述していないファイルがstylesheetsフォルダに入っていても、読み込まれないだけでエラーにはならないという理解です) この文言を消しても同様なのであまり関係ないとは思いますが、 念のため情報共有として書かせていただきました。 他にも原因の切り分けをするために必要な情報がありましたら、 教えていただければ追記いたします。 どうぞよろしくお願いいたします。 ### 以下、6/5 追記 投稿時点(6月2日)の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 bootstrap.min *= require bootstrap-theme.min *= require_tree . *= require_self */ ``` なお、現在(6/5)は、 application.cssではなく、stylesheetsディレクトリに余計なファイルが 入っていることが原因かもしれないと考え、 一度、すべてのファイルを外に出し、一ファイルずつディレクトリに戻しながら、 それにあわせて、application.cssの記述も増やしてエラーが発生しないか検証を進めております。 ``` *= require balloon *= require bootstrap-theme.min *= require bootstrap.min *= require setting *= require style *= require_tree . *= require_self ``` までは、エラーが発生せずに増やすことができました。 もともとディレクトリにあったファイルで残りのファイルは下記になります。 > > bootstrap-theme.css > > bootstrap-theme.css.map > > bootstrap-theme.min.css.map > > bootstrap.css > > bootstrap.css.map > > app_name.css.scss > > users.css.scss > > > このうち、「.css.map」「.css.scss」について、 application.cssにどのように記載すべきかわからなかったため、 1)users.css.scssをstylesheetsディレクトリに加え、application.cssは何も修正をせずに、プリコンパイル 2)bootstrap-theme.css.mapをstylesheetsディレクトリに加え、application.cssは何も修正をせずに、プリコンパイル という、2点の検証をしました。 1)はエラーが発生しませんでしたが、 2)はエラーが発生しました。 どうやら、原因はstylesheesディレクトリに「bootstrap-theme.css.map」が存在することのようです。 .css.mapという拡張子のファイルについてを読んでみたのですが、いまいちピンとこず。 これは、カスタマイズ時に必要になるものなので、本番環境には特に不要なものという理解であっていますでしょうか? 特に問題ないようでしたら、 ディレクトリ内にこのファイルがなければエラーは出ないようなので、その方向でいきたいと思います。
回答: `Sass::SyntaxError: Invalid CSS after "...":3,"sources":[": expected "|", was ""bootstrap-them..."`とあるのでおそらく`@import`をしていると思うのですがそこらへんが間違っているのではないでしょうか?