あまブログ

ドキドキ......ドキドキ2択クイ〜〜〜〜〜〜〜ズ!!

【Rails 7】Multiple files with the same output path cannot be linked ("application.css")エラーを解決する

Rails

Rails7でbin/devを実行するとActionView::Template::Error (Multiple files with the same output path cannot be linked ("application.css")(Sprockets::DoubleLinkError)のエラーが発生

実行環境

  • Ruby：3.3.0
  • Rails：7.1.3.2
  • Node.js：20.12.2
  • yarn：1.22.22
  • importmap-rails：2.0.1
  • tailwindcss-rails：2.3.0
  • cssbundling-rails：1.4.0
  • jsbundling-rails：1.3.0

エラー発生までの流れ

importmap-rails + tailwindcss-railsの構成でアプリを新規作成した。

$ rails new --css tailwind

↓

importmap-rails + tailwindcss-railsからjsbundling-rails + cssbundling-railsに変更した。

(参考：【Rails7】TailwindCSS + daisyUIを導入する)

# Gemfile
gem 'cssbundling-rails'
gem 'jsbundling-rails'

$ bin/rails javascript:install:esbuild
$ bin/rails css:install:tailwind

↓

やっぱりimportmap-rails + tailwindcss-railsに戻すことにしたため、上記の変更を取り消した。

↓

bin/devでサーバー起動すると以下のエラーが出た。

ActionView::Template::Error (Multiple files with the same output path cannot be linked ("application.css")
In "/xxx/sample-app/app/assets/config/manifest.js" these files were linked:
  - /xxx/sample-app/app/assets/stylesheets/application.css
  - /xxx/sample-app/app/assets/builds/application.css
):

解決法

→app/assets/builds/application.cssを削除する。

app/assets/builds/tailwind.cssとapp/assets/builds/application.cssが両方存在してることがエラーの原因だった。

app/assets/builds/tailwind.cssはtailwindcss-railsが出力するファイルで、app/assets/builds/application.cssはcssbundling-railsが出力するファイル。

rails/tailwindcss-rails - Output file: app/assets/builds/tailwind.css

When you run rails tailwindcss:build, the input file will be used to generate the output in app/assets/builds/tailwind.css. That's the output CSS that you'll include in your app (the installer automatically configures this, alongside the Inter font as well).

rails/cssbundling-rails

Whenever the bundler detects changes to any of the stylesheet files in your project, it'll bundle app/assets/stylesheets/application.[bundler].css into app/assets/builds/application.css.

# package.json
{
  省略
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  }
}

app/assets/builds/*は.gitignoreで管理対象外に指定されているため、cssbundling-railsをインストールした時のコミットを取り消してもapp/assets/builds/application.cssが残ってしまっていた。