How to override carbon scss values like prefix globally in a vue app?

[jaskiratr]

What package(s) are you using?

• [x] carbon-components
• [x] @carbon/vue

Summary

In a Vue app, I am unable to set the prefix value for the imported carbon scss styles as described in the documentation. https://github.com/carbon-design-system/carbon/blob/master/docs/guides/sass.md#prefixes

Relevant information

I defined overrides in a separate .scss file and imported it in main.js of the Vue app. It is the first import in the file but the prefix doesn't update.

https://codesandbox.io/s/romantic-heyrovsky-7m3c0?file=/src/main.js

// main.js
import Vue from "vue";
import App from "./App.vue";

import "./_cv-override.scss";

import "carbon-components/scss/components/button/_button.scss";
import "carbon-components/scss/components/tooltip/_tooltip.scss";

import {
  CvButton,
  CvIconButton,
  CvButtonSkeleton,
  CvButtonSet
} from "@carbon/vue";

Vue.component("CvButton", CvButton);
Vue.component("CvIconButton", CvIconButton);
Vue.component("CvButtonSkeleton", CvButtonSkeleton);
Vue.component("CvButtonSet", CvButtonSet);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

// _cv-override.scss
$prefix : 'sds';

Not certain what is the proper way to update the prefix and set feature flags in a Vue application. Any advice would be greatly appreciated!

Thanks for building an incredible design system!