Rails7 ライブリロードとSCSS

はじめに

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

環境

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

rails sまで

1. プロジェクトファイルを作成する
   mkdir sample
2. ファイル内でbundleを初期化
   bundle init
3. Gemfileを編集する(rubyの#を消してactiveにする)
4. gemのインストール先をローカルに設定
   bundle config set path 'vendor/bundle'
5. gemをインストール
   bundle install
6. 新規Railsアプリケーションの作成
   rails new .

sassの導入

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

Procfile.devのタスクを修正

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

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

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

LiveReloadの実装

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

guard-livereloadを追加

Gemfileに下記を追加

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

追加後bundle install

guard-livereloadを初期化

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

Guardfileに下記を追記

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

Procfile.devにタスクを追加

livereload: bundle exec guard

Chromeに拡張機能を追加

拡張機能の管理からファイルの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の省略ができない問題を解決できる方がいたら教えてください。

参考

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