diff --git a/packages/vue-component-library/.storybook/main.ts b/packages/vue-component-library/.storybook/main.ts
index 4ddc64d3f..98448d53c 100644
--- a/packages/vue-component-library/.storybook/main.ts
+++ b/packages/vue-component-library/.storybook/main.ts
@@ -25,9 +25,9 @@ const config: StorybookConfig = {
                 preprocessorOptions: {
                     scss: {
                         additionalData: `
-                            @import "ucla-library-design-tokens/scss/fonts.scss";
-                            @import "ucla-library-design-tokens/scss/_tokens-ftva";
-                            @import "ucla-library-design-tokens/scss/app.scss";
+                            @use "ucla-library-design-tokens/scss/fonts.scss" as *;
+                            @use "ucla-library-design-tokens/scss/abstracts" as *;
+                            @use "ucla-library-design-tokens/scss/app.scss" as *;
                         `,
                     },
                 },
diff --git a/packages/vue-component-library/.storybook/preview.ts b/packages/vue-component-library/.storybook/preview.ts
index c0dd75313..498b4178a 100644
--- a/packages/vue-component-library/.storybook/preview.ts
+++ b/packages/vue-component-library/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import { setup } from "@storybook/vue3"
-import "ucla-library-design-tokens/scss/app-global.scss"
+// import "ucla-library-design-tokens/scss/app-global.scss"
 import "@/styles/global.scss"
 import router from "@/router"
 import { createPinia } from 'pinia';
diff --git a/packages/vue-component-library/src/index.ts b/packages/vue-component-library/src/index.ts
index 4ea6900d3..381a43591 100644
--- a/packages/vue-component-library/src/index.ts
+++ b/packages/vue-component-library/src/index.ts
@@ -1,4 +1,4 @@
-import 'ucla-library-design-tokens/scss/app-global.scss'
+// import 'ucla-library-design-tokens/scss/app-global.scss'
 import '@/styles/global.scss'
 
 export { default as AlphabeticalBrowseBy } from './lib-components/AlphabeticalBrowseBy.vue'
diff --git a/packages/vue-component-library/src/styles/global.scss b/packages/vue-component-library/src/styles/global.scss
index f0a42456b..3209a464e 100644
--- a/packages/vue-component-library/src/styles/global.scss
+++ b/packages/vue-component-library/src/styles/global.scss
@@ -1,4 +1,3 @@
-
 // Theme specific variables
 // use css variables to make it easier to inject vars into storybook. etc
 :root {
diff --git a/packages/vue-component-library/vite.config.ts b/packages/vue-component-library/vite.config.ts
index dd6e1e5d7..0f617fbeb 100644
--- a/packages/vue-component-library/vite.config.ts
+++ b/packages/vue-component-library/vite.config.ts
@@ -73,9 +73,9 @@ export default defineConfig({
       // Additional Sass options go here
       scss: {
         additionalData: `
-                  @import "ucla-library-design-tokens/scss/fonts.scss";
-                  @import "ucla-library-design-tokens/scss/_tokens-ftva";
-                  @import "ucla-library-design-tokens/scss/app.scss";
+                  @use "ucla-library-design-tokens/scss/fonts.scss" as *;
+                  @use "ucla-library-design-tokens/scss/abstracts" as *;
+                  @use "ucla-library-design-tokens/scss/app.scss" as *;
                 `,
       },
       postcss: {