【Rails】Sprockets::DoubleLinkErrorを解消する

1.背景

Ruby on Railsを使用して共同開発を行っています。
他の方の実装分を追加後、rails sでサーバーを起動すると表題のエラーが表示されました。

今回はエラー解消の手順と原因を備忘録としてまとめます。

2.環境

• mac.os バージョン10.15.6
• Ruby 2.7.3
• Rails 6.1.3.1
• psql (PostgreSQL) 12.6

3.該当のエラーと原因

今回のエラーは下記です。

ActionView::Template::Error (Multiple files with the same output path cannot be linked ("top.css")
In "/Users/hogehoge/rails/team_project/app/assets/config/manifest.js" these files were linked:
  - /Users/hogehoge/rails/team_project/app/assets/stylesheets/top.css
  - /Users/hogehoge/rails/team_project/app/assets/stylesheets/top.scss
):

エラーの原因は

• cssとscssが干渉している
• 拡張機能「Live Sass Compiler」が起動していた

この2点でした。
scssは別の方が実際に実装されたファイルです。
拡張機能が加わり、自動で「top.css」と「top.css.map」が作成された結果、干渉してエラーが発生していました。

4.解消方法

解消方法としては単純でした。今回の場合だと、
「top.css」と「top.css.map」の2つを削除するとエラーが解消され、サーバーの起動が実行されました。

5.拡張機能「Live Sass Compiler」について

Live Sass CompilerはVS Codeの拡張機能の一つで、Sass(Scss)を自動でコンパイルしてCSSに変換します。
拡張機能を使用するには、2つの方法があります。
（１）コマンドで下記を入力する

Live Sass: Compile Sass 

(2)VSCodeのステータスバーにあるWatch Sassをクリックする

今回の場合、Watch Sassをクリックすることで自動でコンパイルされていました。
(気づかないうちにクリックしていたようです...)

6.参考

1.Sprockets::DoubleLinkError を解消した方法
2.VSCodeでSass(Scss)を自動コンパイルする簡単な設定方法
3.Visual Studio Code で Sass をコンパイルする Live Sass Compiler

7.最後に

記事の感想や意見、ご指摘等あれば伝えていただけるとありがたいです。
読んでいただき、ありがとうございました。