webpacker で stylus-loader を使う

webpacker で stylusを使おうとして軽くハマってしまったのでメモ。

sass に特に不満はないんだけど、ディレクトリが深くなったときにいちいち index.sass 作らないと import できなくって嫌だったので stylus にしようかなってなった（stylus だと import "directory/*" ができる）んだけど、css 関連のloader の設定が webpacker の中にあってちょっと面倒だった。

もちろん、webpack ちゃんとわかってる人だったら簡単なんだろうけど、そんな人はきっと webpacker すでに剥がしてると思うのでこの記事は読まなくていい。前提として webpacker を使っていて、今後もしばらく剥がす予定がなくて、でも stylus 使いたい人（いるのか？）向け。

結論としては組み込みのsass-loaderをcloneして必要なところを書き換えてるだけ。

// config/webpack/environment.js
const _ = require('lodash')
const webpack = require('webpack')
const { environemnt } = require('@rails/webpacker')

const sassLoader = environment.loaders.get('sass')
stylusLoader = _.cloneDeep(sassLoader)
stylusLoader.test = /.styl$/i
stylusLoader.use.slice(-1)[0].loader = 'stylus-loader'
environment.loaders.prepend('stylus', stylusLoader)

// ...

lodash に依存してるけど、それが嫌な人は自分でがんばってディープコピーして欲しい。ていうか、 ES が標準でディープコピーする手段提供して欲しい。