どうもこじらです。
最近個人開発で作ってるアプリケーションのフロント側を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 ファイル/モジュール/ライブラリを定義できます (すべてのページに含まれます)。
あれ、やっぱ全体に適用されるって言ってるよな…
事象をもう少し掘ってみたら、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？なんだこれ？もしかして開発モードで起きるバグ？」とすごい雑な推測をして色々調べましたｗいや、viteもnuxt3もまだ全然知らないのでｗ
あれ、バグレポートあるけどもう直ってるな…。てか状況もこれとは違うか…。
色々調べたけど分からず、nuxt.config.tsを眺めてました。
解決方法
解決方法はシンプルでした。
「ん？そういえばnuxt.config.tsでcssとして定義する方法とviteのcssとして定義する方法の２つあるな…🤔」
と気づきました。
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で定義するようにしました。
そしたらいけました。
この２つの違いはまだよく分かってないので、ちゃんと分かるようにしておきたいと思いますｗ
こじらでした
じゃ
