Rails で sprockets ではなく webpacker で scss を管理したい

手順

app/assets/stylesheets/をapp/javascript/配下に移動する。

$ mv app/assets/stylesheets/ app/javascript/

app/javascript/stylesheetsになっていればOK。

とりあえず今回は app/javascript/stylesheets/application.scss にそのままスタイルを書いてみる。

#背景を赤色に
body {
  background-color: red;
}

次に、スタイルシートを読み込む記述を削除する。Webpackerで管理するということは、JSで管理するということ。なのでjavascript_pack_tagだけを記述すればOK。

app/views/layouts/application.html.slim

#スタイルシートを読み込む記述を削除
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

#これだけでいい
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

Railsサーバーとwebpack開発サーバーを立ち上げておく。

$ rails s

#別ターミナルで
$ ./bin/webpack-dev-server

デザインを変更する。

#背景を緑色に
body {
  background-color: green;
}

リアルタイムで赤色から緑色に変わるはず。

参考

• Ruby on Rails: cssの管理をAssets PipelineからWebpakerに移行するときのメモ - Madogiwa Blog