実現したいこと
rails newの際にcssを--tailwindで立ち上げたrails7アプリがあり、
このアプリのcssをtailwindcssからdartsassに移行したいです。
行ったこと
1.アプリ内のtailwind関係のファイルの削除
tailwind.css、tailwind.config.js、application.tailwind.cssを削除
2.gemからtailwindを削除
Gemfile.lockを削除、Gemfileのgem "tailwindcss-rails"をコメントアウトした後bundle install
3.viewからtailwindのstylesheetリンクを削除
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>を削除
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>が残った状態と番号リストなる
4.dartsassのインストール
./bin/bundle add dartsass-rails
./bin/rails dartsass:install
を実行、app/assets/stylesheetにapplication.scssが生成されたことを確認
5.scssフォルダの作成、マージ
app/assets/stylesheet以下に複数のフォルダを作成し、中に_index.scss等複数のscssファイルを作成
@useや@forwardを使って全てを最初に作成されたapplication.scssにマージ
6.Procfile.devを編集
tailwind:watchの行を削除してcss: bin/rails dartsass:watchと書き込む
7.bin/devで再起動
確認できていること
stylesheets直下のapplication.scssを保存すると同じ場所にapplication.cssが作成される
同時にapp/assets/buildsにもapplication.cssが作成される
buildsに作成されるapplication.cssには上記5で作成した各scssファイルに記述したcssが反映されているため、マージは成功しているようです。
エラーコード
エラーは出てこないです
一方でbin/devし直した上でhead内の<link rel="stylesheet" href="/assets/application-○○.css" data-turbo-track="reload">のリンク先を開くと
@tailwind base; @tailwind components; @tailwind utilities; /* @layer components { .btn-primary { @apply py-2 px-4 bg-blue-200; } } */ /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */ body { background-color: white; }
となっており、削除したはずのtailwind.css等の内容が含まれたcssが読み込まれているようです。
試したこと
gitのビルドの設定、オプションの設定を参考にconfig/initializers以下にdartsass.rbを作成し、以下のように記入
Rails.application.config.dartsass.build_options << " --quiet-deps" Rails.application.config.dartsass.builds = { "application.scss" => "application.css", }
変化はありませんでした。
app/assets/builds以下に作成されたapplication.cssが各scssファイルの内容を取り込めているので、このcssファイルを読み込むパスを作成すればいいのかなとは思うのですが思うようにいきません。
ご助力いただけますと幸いです。
補足情報(FW/ツールのバージョンなど)
javascriptの読み込みはimportmapで行なっています。
application.jsにcssに関する記述はありません。
0 コメント