どうもこじらです。
最近個人開発で作ってるアプリケーションのフロント側をVue2からVue3に書き換えています。Nuxt3で環境を作りつつ、ひたすらOptions APIからComposition APIに書き換えています。
いやーTypescriptとComposition APIは相性いいですね。まだ触りたてですが、苦労してでもComposition APIに移行する価値がありそうな予感がしています。
環境と事象
nuxt.config.tsで定義したcssが<NuxtPage />で読み込まれたコンポーネントに適用されない問題が起きました。悩んだ時間の割に解決方法は簡単でした。
(てか、普通にアホなだけでした。)
まずはその時の環境です。
環境
- vue: 3.3.4
- nuxt: 3.7.4
-
vite-plugin-vuetify: 1.0.2
- vuetify: 3.3.22
ViteはNuxtに組み込まれてらしいのでバージョンは知りません。
npm run devでローカル環境で立ち上げています。
あんまり関係ないですが、OSはWindows10でブラウザはChromeです。
事象
事象の概要としては、pages/index.vueに<h3>タグを記載し、scssでh3のstyleを定義してnuxt.config.tsで定義を読み込ませたのに、styleがあたらないといった感じです。
あれ?おかしいな~と思ってまずは公式のドキュメントを確認してみました。
グローバルに設定する CSS ファイル/モジュール/ライブラリを定義できます (すべてのページに含まれます)。
![](https://noumisoblog.com/wp-content/uploads/cocoon-resources/blog-card-cache/0a99eaf0097d4fa86fb96de946d6daf8.png)
あれ、やっぱ全体に適用されるって言ってるよな…
事象をもう少し掘ってみたら、app.vueにのみstyleが適用されるようになっていて、<NuxtPage />で読み込まれるpages配下の内容には適用されていないといった感じでした。
基礎的な話ですが、vueにおけるスコープ付きcssはvueが各HTMLタグに、data-v-xxxxxxという値を自動生成することにより実現しています。
data-v-xxxxxxがscopedで定義した場合の範囲の識別子になっている訳です。
そして、今回の間接的な原因は、定義したscssがapp.vueにのみ適用されるようにスコープ(data-v-xxxxxx)が付いていたといった形です。
開発者ツール(F12)で対象のscssを見るとこんな感じの記載があるのでそれで分かります。
<style type="text/css" data-vite-dev-id="C:/vue/project/pages/index.vue?vue&type=style&index=0&scoped=2dab939d&common.scss></style>
疑ったこと
「data-vite-dev-id?なんだこれ?もしかして開発モードで起きるバグ?」とすごい雑な推測をして色々調べましたwいや、viteもnuxt3もまだ全然知らないのでw
あれ、バグレポートあるけどもう直ってるな…。てか状況もこれとは違うか…。
色々調べたけど分からず、nuxt.config.tsを眺めてました。
解決方法
解決方法はシンプルでした。
「ん?そういえばnuxt.config.tsでcssとして定義する方法とviteのcssとして定義する方法の2つあるな…🤔」
と気づきました。
export default defineNuxtConfig({ css: [ 'vuetify/lib/styles/main.sass', ], vite: { ... css: { preprocessorOptions: { scss: { additionalData: '@import "@/assets/styles/common.scss"; } } } } })
vite.css.preprocessorOptions.scss.additionalDataに定義してたやつを、cssで定義するようにしました。
そしたらいけました。
この2つの違いはまだよく分かってないので、ちゃんと分かるようにしておきたいと思いますw
こじらでした
じゃ