Rails5.1 Vue.js環境で、scssファイルもライブリロードの対象にする

Rails5.1から搭載されたWebpackerですが、app/javascripts/packsのファイルしか見に行かないので、app/assets/stylesheets内のscssをライブリロードすることができません。
そこで無理やりライブリロードの対象にさせる方法をご紹介します。

rails new –webpack=vueで作成した環境で適用する方法になります。
仕様がころころ変わっているので、既に過去の情報となっているかもしれません。

まずライブリロードを適用

既にbin/serverで実行されている方はとばしてください。

bin/webpack-dev-serverと、rails sを2つとも起動する必要がありますが、
foremanでそれを実現することができます。

Gemfileにgem ‘foreman’を追記し、bundleでインストールします。

gem 'foreman'
bundle install

rootにprocfile.devを作成し、以下を記述します。

web: bundle exec rails s
# watcher: ./bin/webpack-watcher
webpacker: ./bin/webpack-dev-server

bin/serverを作成し、以下の通り記述します。

#!/bin/bash -i
bundle install
bundle exec foreman start -f Procfile.dev

ターミナルからchmodでパーミッションを変更し、bin/serverを実行します。

chmod 777 bin/server
bin/server

localhost:5000にアクセスし、vueファイルをいじると、リアルタイムでリロードされます。

scssファイルもライブリロードさせる

config/webpacker.ymlを開くと、「resolved_paths」の項目があります。
ここで対象のパスを追加できるので、以下のように書き換えます。

resolved_paths: [app/assets/stylesheets]

jsファイルに、scssファイルをインポートします。
(今回は「app/javascript/packs/hello_vue.js」に「app/assets/stylesheets/home.scss」を追加)

import 'home.scss'

この状態でbin/serverを再実行します。

bin/server

app/assets/stylesheets/home.scssを編集すると、ブラウザもリロードしてくれます。

resolved_paths含めた対象フォルダ内の全てのファイルを生成しにいくので、パスを追加するならばできるだけ下層にした方が良さそうです。

Writer

hys

よろしくお願いします。

Page Topへ