railsのactiontextのcssが効かない

Question

actiontextをインストールしたのですがうまく表示できません。分かる方いましたら教えていただきたいです。

$rails action_text:install
$rails db:migrat

を実行し

= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

= f.rich_text_area :content

と記述してもrich_text_areaのcssが効いていません

発生している問題・エラーメッセージ

Failed to execute 'define' on 'CustomElementRegistry': the name "trix-toolbar" has already been used with this registry

railsを触り始めたばかりなのでwebpackの問題なのかactiontextの入れ方に問題があったのかわからない状況です。
コメントくださると助かります。よろしくお願いいたします。

Answer 1

試しにRails公式のドキュメントを参考に実装してみましたが、特に問題がありそうなところはありませんでした。

https://railsguides.jp/action_text_overview.html

なので、お使いになっているRailsの状態がおかしいということになりますね

Action Text のフィールドがあることから、
一番怪しいのは cssがロードできていないことですね

http://localhost:3000/assets/actiontext.source.scss にはアクセスできますかね？

できなければcssがロードできていないようですね。

できた場合であれば、他の何かに上書きされているんだと思います。

ChromeのDeveloper tools/Elements/Styles で該当のHTMLタグにどんなスタイルが付与されているか確認してみるのが良いかもしれません????

Comments

[nhkg]

コメントありがとうございます！
rails5からrails6にあげたのが原因でしょうか。。
http://localhost:3000/assets/actiontext.source.scss
で呼び出すことできました。

<style type="text/css" data-tag-name="trix-toolbar">

が3回呼ばれていたのでそれが原因でしょうか？

[s4na_penguin]

> rails5からrails6にあげたのが原因でしょうか。。

いえ、 Rails 6.0の新機能なので、いけないということはないと思います

> <style type="text/css" data-tag-name="trix-toolbar">
> が3回呼ばれていたのでそれが原因でしょうか？

いえ、CSSは何度も呼ばれてもOKですね

呼ばれているということは、他のものが別のルールを上書きしているが原因っぽいですね

CSSフレームワークなど追加していたりしますかね？

もしそうならそのせいですね・・・