Rails×Vue.jsでVuetifyを導入しようとしたときのStylusエラー解消法

Rails×Vue.jsで作ってたアプリにVuetifyを導入しようとしたらStylusのエラーが発生しました。

環境

tocomi$ rails -v
Rails 5.2.3

tocomi$ vue -V
3.5.5

前提

vue add vuetifyで作成されたファイル群をapp/javascriptにコピーしてVuetifyを導入しようとしました。

Stylusのエラー

04:11:39 webpack.1 | ERROR in ./node_modules/vuetify/src/stylus/app.styl 1:0
04:11:39 webpack.1 | Module parse failed: Unexpected character '@' (1:0)
04:11:39 webpack.1 | You may need an appropriate loader to handle this file type.
04:11:39 webpack.1 | > @-moz-keyframes shake {
04:11:39 webpack.1 | |   59% {
04:11:39 webpack.1 | |     margin-left: 0;

You may need an appropriate loader to handle this file type.
とあるので、どうやらloaderとやらの設定が必要っぽいです。

loaderの追加

なんとなくwebpack周りの設定なんだろうなーと思ったので、
config/webpackディレクトリに目星をつけました。

loaders以下にvue.jsというのがあったので、
見よう見まねでstylus.jsを作って読み込ませてみます。

利用するloaderは以下を参考にしました。
https://stackoverflow.com/questions/47452077/how-to-configure-the-webpacker-to-work-with-stylus-so-i-can-use-vuetify

config/webpack/loaders/stylus.js

module.exports = {
  test: /\.styl$/,
  use: [
    'style-loader', 'css-loader', 'stylus-loader'
  ]
}

config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
+ const stylus = require('./loaders/stylus')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
+ environment.loaders.prepend('stylus', stylus)
module.exports = environment

解消

サーバーを再起動したらエラーが消えVuetifyのWelcomeページが表示されるようになりました。

まとめ

とりあえず問題は解消したが、webpack周りの知識が乏しいのでもっと学びが必要。