vueで別画面のコンポーネントで指定しているcssが適用されてしまう

Question

前提・実現したいこと

vue.jsでAコンポーネントとBコンポーネントでそれぞれフッターの出し分けをしたい

発生している問題

Aコンポーネントの画面を表示しているときにBコンポーネントのcssで指定しているフッターのdisplay:noneが効いてしまう。
また、複数画面でフッターを消したいので、フッターに特定の画面だったらという条件はできれば付けたくない

該当のソースコード

Bコンポーネントのcss

<style>
/*footerを消したいのでscopedはわざと取ってます*/
  .footer {
    display: none;
  }
</style>

Aコンポーネントにはフッターをdisplay:noneする記述はない
vueに詳しくないのですが、BコンポーネントのcssがAコンポーネントの画面（Bコンポーネントは呼んでいない）でも適用されている理由が分からない（そういうものというのでしたらそれで納得します）

試したこと

css scopeを付けたり、createdでjsでフッターをdisplay:noneにしてみた

Comments

[surface_0]

vueのファイルは動的読み込みではなく、ビルドしている感じですか？
だとすれば、あらゆるコンポーネントのcssが統合されるので、
scopedされてないcssはコンポーネントを使用していなくてもグローバルに反映されると思います。

[a1yama]

ビルドしています！
なるほど！納得しました！わかりやすいご説明ありがとうございます。

[surface_0]

推測が当たりましたか。良かったです。
もう少し詳しい内容を回答の方に書かせていただきました。

Answer 1

Vueのソースファイルをビルドして使っている場合は、
あらゆるコンポーネントのstyleの記述が統合され、単体のCSSファイルに出力されます。
その際にscopedをつけていないものはそのままの記述が反映されるので、
そのCSSファイルを読み込んでいる限り特定のコンポーネントを使用しているかいないかに関わらず、
グローバルにCSSが適用されることになります。

なお、scopedを指定した場合には下記のように、
特定のコンポーネントと紐づくユニークな属性が付与されてスコープが形成されます。

.footer[data-v-f7180bac] {
  display: none;
}

Comments

[a1yama]

分かりやすくご説明いただきありがとうございます。
動きに関してはmountedにjs書くか、mixinでフラグ用意するようにして解決できそうでした。