How to global import a stylus file in vite

Question

Now I'm try use vite to create a vue app. But have trouble to global import a stylus file in vite.config.js.

I try the code from vite docs.

export default defineConfig({
  css: {
    preprocessorOptions: {
      styl: {
        additionalData: `@import "./src/assets/styles/common.styl"`
      }
    }
  }
})

But it's completely not work.

I got a solution to set global style from github.

export default defineConfig({
  css: {
    preprocessorOptions: {
      stylus: {
        globals: {
          '$highlight-color': 'red'
        }
      }
    }
  }
})

It's works fine, But how to import a styl file globaly? I tried to add 'additionalData' to the workable config. However I got bunch of errors: 'failed to locate file'. It seems like try to import the file in every .vue file, but has trouble to locate the file.

  css: {
    preprocessorOptions: {
      stylus: {
        additionalData: `@import "./src/assets/styles/common.styl";`,
        globals: {
          '$color-g1': '#F3F4FC',
          '$color-white': '#FFFFFF',
        }
      }
    }
  }

Have any idea about this?