Module build failed for Saas Loader - NuxtJS

Question

I am trying to use scss like below in my nuxt application. But this is not working and throwing module failed error. I have use saas-loader & node-saas as dev dependencies.

Do I need to make changes in my nuxt.config.js file too?

<style lang="scss" scoped>
  @use "../assets/styles/functions" as f;
  @use "../assets/styles/variables" as v;

  @use "../assets/styles/components/containers/page-container";
  @use "../assets/styles/components/buttons/primaryBtn";

  .l-empty-page__content {
    font-family: v.$body-font;
  }

Error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                      friendly-errors 23:27:19
SassError: Invalid CSS after "  font-family: v": expected expression (e.g. 1px, bold), was ".$body-font;"
        on line 15 of C:\Workspaces\nuxt-ssr\pages\test.vue
>>   font-family: v.$body-font;