Vue Routerで動的ルーティングをしたComponentだけCSSが効かない問題について

Vue CLIを使って、ちょっとしたSNSを作っていました。

もちろん、ユーザーページ的な位置付けのページがあり、Vue Routerを使って以下のようにルーティングしていました。

{
    path: "/user/:id",
    name: "user",
    component: User
}


開発しているときは、特に違和感もなく進めていたのですが、後からよくよく見てみると、一部のCSSが効いていないことが判明し、フォントサイズとかに差異が出ていました。

ちなみにCSSはindex.htmlのheadタグ部分に書いていました。

「何でこのページだけ?」と思いましたが、考えてみると、このページだけ動的ルートマッチングを使っていたことに気づきました。

動的ルートマッチングとは、要するに、pathの一部を ”:id” のような形で置いて、そこに何かしらのIDが来れば、そのpathとして認識するための機能です。

なぜ、このようなことが起きるかは不明ですが、Stack Overflowで同じような質問をしている人を発見しました。

どうやら、HTMLのhead部分で読み込ませるのではなく、Vueの中でimportしてあげないといけないみたいです。

VueでCSSをimportする方法はこんな感じ。ここでは、styleタグの中に@importしていますが、scriptタグの中でもいけるみたい。

全てのページの親となっているApp.Vueにこんな感じでimportを追加してあげると、動的ルートマッチングのページでもCSSが効くようになりました。

import Navigation from "@/components/Navigation"
import Footer from "@/components/Footer" 
import "../static/css/main.css" // ここを追加した!

export default {
  name: "App",
  components: {
    Navigation,
    Footer
  },
}