【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가 간섭하고 있습니다

Extension "Live Sass Compiler"가 시작되었습니다

이 두 점이었습니다.
scss는 다른 쪽이 실제로 구현된 파일입니다.
확장 기능이 추가되어 자동으로 'top.css'와 'top.css.map'이 생성된 결과 간섭하여 오류가 발생했습니다.

4.해소 방법

해결 방법으로는 간단했습니다. 이번 경우라면,
"top.css"와 "top.css.map"의 두 가지를 삭제하면 오류가 해결되고 서버가 시작되었습니다.

5.확장 기능 「Live Sass Compiler」에 대해서

Live Sass Compiler는 VS Code의 확장 기능 중 하나로 Sass(Scss)를 자동으로 컴파일하여 CSS로 변환합니다.
확장 기능을 사용하는 방법에는 두 가지가 있습니다.
(1) 명령으로 다음을 입력합니다.

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. 마지막으로

기사의 감상이나 의견, 지적 등 있으면 전해 주시면 고맙습니다.
읽어 주셔서 감사합니다.