1

ローカルで動いていた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という拡張子のファイルについてを読んでみたのですが、いまいちピンとこず。
これは、カスタマイズ時に必要になるものなので、本番環境には特に不要なものという理解であっていますでしょうか?

特に問題ないようでしたら、
ディレクトリ内にこのファイルがなければエラーは出ないようなので、その方向でいきたいと思います。

2 件の回答 2

0

source mapというのはSass利用時にSassの元の行やファイルがどこにあるかを示すものになります。(メインの利用方法は開発環境だと認識してます)
例えばtest.scsstest2.scssというファイルが書いてあり、application.css内でこの2つのファイルが取り込まれ、コンパイルされると1つのapplication.cssが生成されます。
このときsource mapがなければapplication.css内のCSSはtest.scss内で書かれたものなのか、test2.scss内で書かれたものなのかがわかりません。
そういうときに利用するものがsource mapです。開発環境でのエラーを取り除きたい、そして開発時にsource mapを利用していないのであれば取り除いてよいかと思います。

3
  • 明示的に自分で何かをした記憶はないので、おそらく開発環境で利用していないと思うのですが、開発環境で利用するということが、具体的にどのような行動かわかっておりません。教えていただけないでしょうか? Commented 2018年6月6日 13:21
  • @ping_engineer 僕の推測ですが今回のプロジェクトでbootstrapをダウンロードして展開してapplication.cssに読み込んだものだと思われます。source mapはbootstrapの開発者たちが開発時に利用しているものだと思われるので、そのファイルがそのままディレクトリに残っているのだと思っています。source mapの利用に関しては参考になるブログがたくさんあるのでそちらを参照されるとよいかと思います。 yusukegoto.com/2234 Commented 2018年6月6日 13:27
  • はい。おっしゃる通り、bootstrapをダウンロードして展開してapplication.cssに読み込んでいます。なるほど、では、一旦、削除しても問題ないということで進めたいと思います。 リンクについてもありがとうございました。拝見します。 Commented 2018年6月9日 4:43
-1

Sass::SyntaxError: Invalid CSS after "...":3,"sources":[": expected "|", was ""bootstrap-them..."とあるのでおそらく@importをしていると思うのですがそこらへんが間違っているのではないでしょうか?

2
  • application.cssの中身を共有していただけるとより詳細にアドバイス出来るかと思います。 Commented 2018年6月4日 7:47
  • Daiki Tagami さん、返信ありがとうございます! application.cssの中身について、追記いたしました。 また、追加で検証しているないようがありましたので、 そちらについても記載しております。 Commented 2018年6月5日 10:25

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。