Nuxt3で共通で読み込んだscssが読み込んだコンポーネントの数だけheadタグ内に挿入される

前提

Nuxt3を使用しています。
ページ全体で使用したいscssをnuxt.config.tsで読み込んでいます。
その共通のscssが、読み込んだコンポーネントの数だけheadタグ内に挿入されていきます。
重複して読み込まれないようにする設定の仕方が知りたいです。

実現したいこと

重複して読み込まれないようにする
今と同じように各コンポーネント内で定義された変数が使用できる

発生している問題・エラーメッセージ

該当のソースコード

TypeScript

// https://v3.nuxtjs.org/api/configuration/nuxt.configexport default defineNuxtConfig({ app: { head: { charset: "utf-16", viewport: "width=500, initial-scale=1", title: "My App", meta: [ // <meta name="description" content="My amazing site"> { name: "description", content: "My amazing site." }, ], }, }, vite: { ssr: true, css: { preprocessorOptions: { scss: { additionalData: '@use "@/assets/sass/foundation/f-import" as foundation; \ @use "@/assets/sass/object/utility/u-import" as utility; \ @use "@/assets/sass/object/javascript/j-import" as javascript; \ ', }, }, }, },});

layouts/default.vue

vue

<template> <div> <AppHeader /> <div> <slot /> <AppFooter /> </div> </div> </template> <style lang="scss"> body { background-color: black; } </style>

pages/index.vue

vue

<template> <main class="l-Main" > <ProjectTopMv/> <ProjectTopMovie/> </main> </template> <style lang="scss"> .l-Main { background-color: foundation.$blue; padding: 50px; } </style>

components/project/TopMv.vue

vue

<template> <section class="p-Top__mv"> <p class="u-light-blue">aaaaaaaaaaaaaa</p> </section> </template> <script lang="ts"> export default { setup() { // [1] CSS 変数をキーバリューにした Object を作成 const styles = computed<Object>(() => ({ '--gray': `#dddddd`, })) return { styles } }, } </script> <style lang="scss" scoped> .p-Top__mv { background-color: red; } </style>

components/project/TopMovie.vue

vue

<template> <section class="p-Top__movie"> <p class="u-pink">bbbbbbbbbbb</p> </section> </template> <script lang="ts"> </script> <style lang="scss"> .p-Top__movie { background-color: yellow; } </style>

assets/sass/foundation/_f-import.scss

scss

@charset "utf-8"; @forward "./_f-reset";@forward "./_f-media";@forward "./_f-variable";

assets/sass/foundation/_f-reset.scss

scss

@import "~/node_modules/normalize.css/normalize.css";

assets/sass/foundation/_f-reset.scss

scss

@import "~/node_modules/normalize.css/normalize.css";

assets/sass/foundation/_f-media.scss

scss

$breakpoint: ( sm: "screen and (max-width: 640px)", md: "screen and (max-width: 820px)", lg: "screen and (min-width: 821px)", xl: "screen and (min-width: 1280px)",) !default; @mixin media($device) { @media #{map-get($breakpoint, $device)} { @content; }}

assets/sass/foundation/_f-variable.scss

scss

$light-blue: #afeaf0;$blue: #8fdde7;$pink: #eb6d9a;$orange: #f6a532;

補足情報（FW/ツールのバージョンなど）

package.json

{ "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" }, "devDependencies": { "normalize.css": "^8.0.1", "nuxt": "3.0.0-rc.12", "sass": "^1.55.0" } }