Vue.js の Style の書き出しが分からない
公開日：
最終更新日：
要約
Vue.jsでのStyle要素の読み込み順序に関して、Bootstrapが複数回読み込まれ最後に再度読み込まれるため、スタイルの上書きが無効になる問題を指摘しています。main.tsやコンポーネント内で読み込むCSSの順序を理解しないと、意図通りのレイアウト作成が困難になるため、読み込みタイミングの調査が必要です。
福間創の「this is our music」が届く。
平沢進が加わっているとのことで購入した。
早速聴いてみたが、ほぼ全曲インストのようで、これらの音のいずれかを平沢進が奏でているのだろう。おそらく。
じっくり聞くのは後にして。
Vue.jsにて、Style要素がどのような順番（タイミング）で読み込まれるのか（書き出されるのか）が分かっていない。
動かしてみると、上のようになるのだが、ここで問題なのは、Bootstrapが何度も読み込まれていることである。非常に無駄な動きをしている。
そして、一番最後にBootstrapを再度読み込むものだから、それまでに上書きしたつもりでいたスタイルが、本来のBootstrapの記述に上書きされ、無効とされてしまう（ややこしい）。
main.tsなどで読み込ませているBootstrap等のライブラリやStyleの記述は、どのような順番で書き出されるのか、また、Componentの中で読み込ませた場合には、どのタイミングで書き出されるのかを調べなければならない（でないと、レイアウトが作れない！）。