Rails+VuejsでScoped CSSが適用されない

現在、Rails+Vuejsでサービスを開発しています。 Scoped CSSを使用したライブラリを使おうとしたところ、CSSが適用されない事象に遭遇したので原因と対処方法のメモです。

事象

Vueコンポーネントのreviewsをレンダリングするため、Rails側のViewに以下の記述を追加しました。 reviews内ではScoped CSSでスタイルを定義しています。

index.html.slim

= javascript_pack_tag 'reviews'

reviews.vue

<style scoped>
.example { color: red }
</style>

ところが、Scoped CSSが適用されない・・

対処

stylesheet_pack_tagを追加する必要がありました。

index.html.slim

= stylesheet_pack_tag 'reviews'
= javascript_pack_tag 'reviews'

jsとcssは別ファイルに分割されるんですね。