Global Variables : Stylus Vue Vite

I would like to create and use stylus variables globally in my Vue Vite project. How can I import stylus variables globally to use within the script section of my SFC?

Here's my Vite config:

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      styl: {
        additionalData: `@import "@/styles/styles.styl"`
      }
    }
  }
})

In my styles.styl file I define a variable like:

contentSideMargin = 50px

In my SFC I try to use a style from styles.styl such as

<style lang="stylus" scoped>
#main-container
  padding: $contentSideMargin  /* have also tried `contentSideMargin` */
</style>

but it does not work.

—

EDIT: adding package.json. There are no visible errors, the variable is passed directly into the css rather than its value.

{
  "name": "project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "pinia": "^2.0.17",
    "pug": "^3.0.2",
    "vue": "^3.2.37",
    "vue-router": "^4.1.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "stylus": "^0.58.1",
    "stylus-loader": "^7.0.0",
    "vite": "^3.0.0"
  }
}

from Global Variables : Stylus Vue Vite