Updating sass to use @use instead of @import

Author: webdevnerdstuff

src/components/Sections/ThemesSection.vue

@@ -16,7 +16,10 @@
 				(<code>neon-bunny</code>,
 				<code>neon-bunny-carrot</code>) built into the component that are based
 				off of my own VSCode
-				<a :href="links.neonBunnyTheme" target="_blank">Neon Bunny Theme</a>.
+				<a
+					:href="links.neonBunnyTheme"
+					target="_blank"
+				>Neon Bunny Theme</a>.
 			</p>
 
 			<CodeBlock
@@ -32,28 +35,24 @@
 			<p>
 				Another other is to use the main
 				<a
-					:href="
-						selectedLibrary.id === 'prism'
-							? prismLinks.homepage
-							: highlightJsLinks.homepage
-					"
+					:href="selectedLibrary.id === 'prism'
+						? prismLinks.homepage
+						: highlightJsLinks.homepage
+						"
 					target="_blank"
-					>{{ selectedLibrary.label }}</a
-				>
+				>{{ selectedLibrary.label }}</a>
 				themes. If you use the component to load the theme, you just need to set
 				the
 				<a href="#props-theme-option">theme</a> prop to the desired theme. When
 				you load it this way, the component will use a <code>fetch</code> call
 				to load them themes from the
 				<a
-					:href="
-						selectedLibrary.id === 'prism'
-							? prismLinks.cdn
-							: highlightJsLinks.cdn
-					"
+					:href="selectedLibrary.id === 'prism'
+						? prismLinks.cdn
+						: highlightJsLinks.cdn
+						"
 					target="_blank"
-					>jsDelivr CDN</a
-				>. Fetching the {{ selectedLibrary.label }} themes from a CDN was the
+				>jsDelivr CDN</a>. Fetching the {{ selectedLibrary.label }} themes from a CDN was the
 				best method I could figure out at this time to dynamically load the
 				themes, while making it easier for you to use them. You can also link to
 				another CDN of your choice.
@@ -92,7 +91,10 @@
 
 			<p v-if="selectedLibrary.id === 'prism'">
 				Themes from their
-				<a :href="prismLinks.themes" target="_blank">Prism themes</a>
+				<a
+					:href="prismLinks.themes"
+					target="_blank"
+				>Prism themes</a>
 				repository can be used this way as well.
 				<span v-html="tabIconCopy"></span>
 			</p>
@@ -115,11 +117,15 @@
 			<CodeBlock
 				:code="examples[selectedLibrary.id].importCss"
 				:highlightjs="selectedLibrary.id === 'highlightjs'"
-				label="Using import (css/sass/scss)"
+				label="Using <code>@use</code> (css/sass/scss)"
 				lang="html"
 				:prismjs="selectedLibrary.id === 'prism'"
 				:theme="selectedTheme"
-			/>
+			>
+				<template #label>
+					Using <code>@use</code> (css/sass/scss)
+				</template>
+			</CodeBlock>
 		</div>
 	</div>
 </template>
@@ -153,7 +159,7 @@ const examples = {
   theme="neon-bunny-carrot"
 />`,
 		importCss: `<style>
-  @import 'prismjs/themes/prism-coy.css';
+  @use 'prismjs/themes/prism-coy.css';
 <\/style>`,
 		importJs: `<script setup>
   import 'prismjs/themes/prism-coy.css';
@@ -190,7 +196,7 @@ const examples = {
   theme="neon-bunny-carrot"
 />`,
 		importCss: `<style>
-  @import 'highlight.js/styles/base16/onedark.css';
+  @use 'highlight.js/styles/base16/onedark.css';
 <\/style>`,
 		importJs: `<script setup>
   import 'highlight.js/styles/base16/onedark.css';

src/plugin/CodeBlock.vue

@@ -1,18 +1,27 @@
 <template>
-	<div class="v-code-block v-code-block--mb-5" :class="codeBlockClasses">
+	<div
+		class="v-code-block v-code-block--mb-5"
+		:class="codeBlockClasses"
+	>
 		<div
 			v-if="label || tabs || slots.label || slots.tabs"
 			class="v-code-block--header"
 			:style="headerStyles"
 		>
-			<div class="v-code-block--label v-code-block--pb-1" :class="labelClasses">
+			<div
+				class="v-code-block--label v-code-block--pb-1"
+				:class="labelClasses"
+			>
 				<template v-if="slots.label">
 					<slot name="label" />
 				</template>
 				<template v-else>{{ props.label }}</template>
 			</div>
 
-			<div class="v-code-block--tabs" :style="tabGroupStyle">
+			<div
+				class="v-code-block--tabs"
+				:style="tabGroupStyle"
+			>
 				<template v-if="slots.tabs">
 					<slot name="tabs" />
 				</template>
@@ -658,7 +667,7 @@ function runCode(): void {
 </script>
 
 <style lang="scss">
-@import './styles/utilities';
+@use './styles/utilities';
 
 .v-code-block {
 	&- {
@@ -676,5 +685,5 @@ function runCode(): void {
 </style>
 
 <style lang="scss" scoped>
-@import './styles/main';
+@use './styles/main';
 </style>

src/plugin/StatusIcons.vue

@@ -51,5 +51,5 @@ defineProps({
 </script>
 
 <style lang="scss">
-@import './styles/themeStyles';
+@use './styles/themeStyles';
 </style>