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

前提

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

実現したいこと

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

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

該当のソースコード

TypeScript
1
2// https://v3.nuxtjs.org/api/configuration/nuxt.config
3export default defineNuxtConfig({
4	app: {
5		head: {
6			charset: "utf-16",
7			viewport: "width=500, initial-scale=1",
8			title: "My App",
9			meta: [
10				// <meta name="description" content="My amazing site">
11				{ name: "description", content: "My amazing site." },
12			],
13		},
14	},
15	vite: {
16		ssr: true,
17		css: {
18			preprocessorOptions: {
19				scss: {
20					additionalData:
21                    '@use "@/assets/sass/foundation/f-import" as foundation; \
22                    @use "@/assets/sass/object/utility/u-import" as utility; \
23                    @use "@/assets/sass/object/javascript/j-import" as javascript; \
24                    ',
25				},
26			},
27		},
28	},
29});

layouts/default.vue

vue
1<template>
2	<div>
3		<AppHeader />
4		<div>
5            <slot />
6			<AppFooter />
7		</div>
8	</div>
9</template>
10
11<style lang="scss">
12body {
13    background-color: black;
14}
15</style>

pages/index.vue

vue
1<template>
2    <main
3      class="l-Main"
4    >
5      <ProjectTopMv/>
6      <ProjectTopMovie/>
7  
8    </main>
9  </template>
10
11<style lang="scss">
12.l-Main {
13    background-color: foundation.$blue;
14    padding: 50px;
15}
16</style>

components/project/TopMv.vue

vue
1<template>
2  <section class="p-Top__mv">
3    <p class="u-light-blue">aaaaaaaaaaaaaa</p>
4  </section>
5</template>
6
7<script lang="ts">
8
9export default {
10  setup() {
11    // [1] CSS 変数をキーバリューにした Object を作成
12    const styles = computed<Object>(() => ({
13      '--gray': `#dddddd`,
14    }))
15
16    return { styles }
17  },
18}
19</script>
20
21<style lang="scss" scoped>
22.p-Top__mv {
23  background-color: red;
24}
25</style>

components/project/TopMovie.vue

vue
1<template>
2  <section class="p-Top__movie">
3    <p class="u-pink">bbbbbbbbbbb</p>
4  </section>
5</template>
6
7<script lang="ts">
8</script>
9
10<style lang="scss">
11.p-Top__movie {
12    background-color: yellow;
13}
14</style>

assets/sass/foundation/_f-import.scss

scss
1@charset "utf-8";
2
3@forward "./_f-reset";
4@forward "./_f-media";
5@forward "./_f-variable";

assets/sass/foundation/_f-reset.scss

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

assets/sass/foundation/_f-media.scss

scss
1$breakpoint: (
2	sm: "screen and (max-width: 640px)",
3	md: "screen and (max-width: 820px)",
4	lg: "screen and (min-width: 821px)",
5	xl: "screen and (min-width: 1280px)",
6) !default;
7
8@mixin media($device) {
9	@media #{map-get($breakpoint, $device)} {
10		@content;
11	}
12}

assets/sass/foundation/_f-variable.scss

scss
1$light-blue: #afeaf0;
2$blue: #8fdde7;
3$pink: #eb6d9a;
4$orange: #f6a532;

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

package.json
1{
2  "private": true,
3  "scripts": {
4    "build": "nuxt build",
5    "dev": "nuxt dev",
6    "generate": "nuxt generate",
7    "preview": "nuxt preview",
8    "postinstall": "nuxt prepare"
9  },
10  "devDependencies": {
11    "normalize.css": "^8.0.1",
12    "nuxt": "3.0.0-rc.12",
13    "sass": "^1.55.0"
14  }
15}