Rails+vue+Parcel環境でSFCのスタイルが効かなかった件

単一コンポーネントで定義したスタイルが反映されない件

Rails+vue+Parcel環境で開発をやっていた時vueのSFCで書いたスタイルが適用されない
いろいろ調べても記事はあまりなかった。
コードをしっかり確認したら解決したのでまとめてみました。

解決法

CSSを読み込むヘルパーメソッドを自作する

app/helpers/application_helper.rb

module ApplicationHelper
    ・・・

    def javascript_pack_tag(name)
        javascript_include_tag(manifest["#{name}.js"])
    end

+   def stylesheet_pack_tag(name)
+       stylesheet_link_tag(manifest["#{name}.vue"])
+   end

    ・・・

あとは読み込みたいスタイルがあるvueファイルを下記のように指定するだけ。

app/views/static_pages/home.html.erb

<% if logged_in? %>
・・・

      <div id="app"></div>
      <%= javascript_pack_tag 'index' %>
      <%= stylesheet_pack_tag '読み込みたいSFCの名前' %>

・・・

なぜこれで解決するの？

npm run watchでやっている内容は以下の通り
parcel watch app/javascripts/packs/index.html -d public/packs --public-url /packs/ --hmr-port 50000
トランスパイルしたものはpublic/packsに入ってくる。
ここで作成されるmanifestファイルの内容は以下の通り。

{
  "index.html": "/packs/index.html",
  "index.js": "/packs/packs.e31bb0bc.js",
  "FeedList.vue": "/packs/packs.e31bb0bc.css",
  "FeedItem.vue": "/packs/packs.e31bb0bc.css"
}

この内容をさっきのヘルパーでは読み込んでいる。

app/helpers/application_helper.rb

module ApplicationHelper
・・・

  private

    def manifest
      @manifest ||= load
    end

    def load
      manifest_path = Rails.root.join('public', 'packs', 'parcel-manifest.json')
      if manifest_path.exist?
        JSON.parse manifest_path.read
      else
        {}
      end
    end
end

これでマニフェストに書かれていることが読み込まれるので、先ほど作ったヘルパーメソッド（stylesheet_pack_tag）内でstylesheet_link_tagを使うことでrailsにCSSを読み込む！

後書き

ドキュメントに沿ってコピペだけしてた部分でこうした問題があったので、しっかりコードをよもうと思いました。