Rails+Vueでstyle scopedを使う方法

この記事を書いたひと: @t4traw 2018年5月18日

Rails+Vueのコードを書いていて、scopedなstyleを書いても効かない問題に遭遇しました。

<style lang="sass" scoped>
h1
  color: #5649FF
  text-align: center
</style>

<template>
  <div>
    <h1>Hello world</h1>
  </div>
</template>

こんな感じのscopedなstyleを書いても効かない。

あれ?と思って調べたら、viewの方に

<%= javascript_pack_tag 'welcome' %>
<%= stylesheet_pack_tag 'welcome' %>

と、stylesheet_pack_tagも書かないといけないらしい。

うーん、これ書くならscopedな物とそうでない物を分けたほうがいいのかなぁ。とか思ったけど、全体的なcssはコンポーネント化して、微調整とか一部はやっぱscopedが最高なんだよなぁ。