1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【解決方法】couldn't find file 'trix/dist/trix' with type 'text/css" とは?

Posted at

Ruby on rails を学習中の方の参考にしてもらえたら嬉しいです。
今回はアプリケーションを作成している時に出てくるエラーとその解決方法について掲載します。少しでも参考にしていただけると幸いです。
まず最初にcouldn't find file 'trix/dist/trix' with type 'text/css"というエラーの解決方法をお話しします。

▼エラーの紹介

今回のエラーはaction text を使ってテキスト入力をリッチにデコレーションするためのrich textを導入していく過程でCSSを読み込まなくなってしまったエラーです。
スクリーンショット 2023-05-24 5.45.10.png
上のエラー画面のようにcouldn't find file 'trix/dist/trix' with type 'text/css" Checked in these paths:というエラーが出ていますので、これを解決していきます。

▼結論から

このエラーの解決策はcssファイルが入っている stylesheets の actiontext.cssの中にある//=-require trix/dist/trixという行を消すとcssがうまく読み込まられるようになりました。では、この消すまでの過程を見ていきます。
スクリーンショット 2023-05-24 5.45.36.png

▼エラーの原因を探ります

下の画像を見てください。エラーの原因が書いてあります。“trix/dist/trix”という名前のCSSファイルを見つけられないときに発生しますと書いてあります。

注意
※ここで注意したいのはChatGPTは解決方法の1つを提示してくれているだけで、この解決方法が正しくないことがあります。今回はこの解決方法で解決できましたが、開発の順序やスペックによっては、今回の方法で解決しない場合があります。

スクリーンショット 2023-05-25 5.08.55.png

▼まずはactiontextをインストールします

画像にある通り、Rails6にはデフォルトで入っているらしいでの、Gemfileを確認してactiontextが入っているか確認してください。無ければインストールです。
スクリーンショット 2023-05-23 5.20.27.png

▼次にactiontextをインストールして、マイグレーションしていきます

画像の半分から下に書いてあるようにmodeleにhas_rich_text:contentを入れます。
スクリーンショット 2023-05-23 5.20.47.png

▼modeleへの書き方はこんな感じ
スクリーンショット 2023-05-23 5.20.15.png

▼インストールしてマイグレーションすると...

ターミナルではこんな作業が実行されます。
スクリーンショット 2023-05-23 5.19.07.png

▼マイグレーションが成功するとdbにフォルダが追加されます

スクリーンショット 2023-05-23 5.19.23.png

▼最後にactiontextのcssファイルを変更

スクリーンショット 2023-05-24 5.45.36.png
画像のように//=-require trix/dist/trixの行を削除するとcssが読み込まれてブラウザが正しく表示されました。

スクリーンショット 2023-05-24 6.44.37.png

▼最後に

今回のエラーはcssを読み込まなくなってしまったことを解決するための記事なので、rich_textを導入するためにはこれだけの作業では足りません。テキストの保存場所を変えたり、他の作業(コード)が必要です。
導入のための作業は別途確認してください。

いかがでしたでしょうか?
他にも記事を発信していきますので、私の QiitaやTwitterをフォローしていただけると嬉しいです。
個別の質問もぜひ歓迎します。
私自身、初学者ではありますが、1歩先を行くものとして回答できたらと思います。
それでは。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?