はじめに

Rails7を使う上でscss環境とライブリロードが欲しかったので実装した

環境

M1 Mac book
VSCode
Ruby 3.1.0
Rails "~> 7.0.2", ">= 7.0.2.3"
Bundler version 2.3.3

./vendor/bin/bundle add dartsass-rails
./vendor/bin/rails dartsass:install
上記のコマンド2つでdart-sassを導入しProcfile.devを生成する

デフォルトで生成されるものにvendor/を追加する
生成されなかったら自分で作成

# Procfile.devのタスクを修正
web: vendor/bin/rails server -p 3000
css: vendor/bin/rails dartsass:watch

ここまででbin/devコマンドを打てばサーバーの起動とscssの自動コンパイルが動き出す

現状では、サーバー起動とscssのコンパイルはされるが、毎回ブラウザのリロードボタンを押す必要がある。

Gemfileに下記を追加

group :development do
  gem "guard-livereload", require: false
end

追加後bundle install

bundle exec guard init livereload
Guardfileが生成される

Guardfileに下記を追記

watch(%r{app/assets/.+\.(css|html|png|jpg|scss)})

livereload: bundle exec guard

拡張機能の管理からファイルのURLへのアクセスを許可にチェックをいれる

./bin/devで起動する
ターミナルに

web
css
livereload

が表示され、それぞれ起動できたことを確認
http://localhost:3000にアクセス
ブラウザで先ほどダウンロードした拡張機能を押して真ん中の点を赤から緑に変える

以上でviewファイルの変更やscssの変更を監視して自動でリロードします。

scss導入とライブリロード導入に1日使ってしまった。
他の策も試しているうちにrails sができなくなり、rubyの再インストールなど手間がかかった。
こういう時独学だと時間がかかりますね。　周りに教えてくださる方がいたり、スクールに行っていたらスムーズに進めそう。

もっと良い方法がありましたら教えてください。

ついでにbundle binstubs --path=vendor/bin すると bundle binstubs needs at least one gem to run. が出てbundle execの省略ができない問題を解決できる方がいたら教えてください。

多くの方の知見をお借りしました