Rails+Vue.jsでVueファイルのスタイルシートが反映されなかった話

Rails+Vue.jsの組み合わせでアプリ開発をしていたところ、vueファイルのスタイルシートが反映されない。。
という問題を解決したときの覚書です。
類似事例を探すのに苦労したけど、これあまりハマらないのかな？

環境

key	version
Ruby	2.5.0
Rails	5.1.6
vue	2.5.17
vue-loader	14.2.2

rails new hoge --webpack=vueのコマンドでアプリを作成しました。

サンプルコード

Sample.vue

<template lang="pug">
  div#footer
    p tocomi
</template>

<script>
export default {
  data: function () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
#footer {
  position: fixed;
  bottom: 0;
  background-color: rgb(170, 228, 255);
  width: 100%;
  height: 50px;
  text-align: center;
}
</style>

フッター用のコンポーネントを作成したもののスタイルシートが反映されず。

調査

いろいろ調べていたところ、こちらの記事にたどり着きました。
Rails と Vue.js の設計覚書

config/webpack/environment.jsに以下を追加すれば解決できそう。

environment.loaders.get('vue').options.extractCSS = false

問題

これで勝つる！と思ったがまだ修正は反映されず。
念の為サーバー再起動したらスタックトレース吐いてた。

02:54:45 webpack.1 | TypeError: Cannot set property 'extractCSS' of undefined
02:54:45 webpack.1 |     at Object.<anonymous> (/Users/tocomi/develop/ruby/rails/baseball-fan-board/config/webpack/environment.js:8:51)
02:54:45 webpack.1 |     at Module._compile (internal/modules/cjs/loader.js:702:30)
02:54:45 webpack.1 |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
02:54:45 webpack.1 |     at Module.load (internal/modules/cjs/loader.js:612:32)
02:54:45 webpack.1 |     at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
02:54:45 webpack.1 |     at Function.Module._load (internal/modules/cjs/loader.js:543:3)
02:54:45 webpack.1 |     at Module.require (internal/modules/cjs/loader.js:650:17)
02:54:45 webpack.1 |     at require (internal/modules/cjs/helpers.js:20:18)
02:54:45 webpack.1 |     at Object.<anonymous> (/Users/tocomi/develop/ruby/rails/baseball-fan-board/config/webpack/development.js:3:21)
02:54:45 webpack.1 |     at Module._compile (internal/modules/cjs/loader.js:702:30)

undefinedだって。

解決

ただ修正を入れるべき箇所は分かったのでファイルを眺めてみる。

config/webpack/environment.js

...
const vue =  require('./loaders/vue')

environment.loaders.append('vue', vue)
...

.loaders/vueを読み込んでいるのでそれを見てみると良さそう。

config/webpack/loaders/vue.js

...
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { extractCSS }
  }]
}

extractCSSがあった！
useってプロパティで配列を持つようになっているところが問題だったっぽい。

environment.loaders.get('vue').use[0].options.extractCSS = false

こうしたらうまく動きました。
配列のインデックスがべた書きなのがすごく気持ち悪いです。

結論

取りあえず動くようになったものの、力技で解決している感が否めないので、
そもそもの設定がおかしいとかもっとスマートな解決策とかあれば教えてほしいです。