Vite别名在TailwindCSS @reference指令中无法生效的问题求助

大家好，我最近在项目里碰到了个棘手的小问题，想请社区的大佬们帮忙支支招！

我在项目的vite.config.js文件里，给client/main.css配置了一个别名@main-css，具体配置代码如下：

import { defineConfig } from 'vite'
import path from 'path'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
  resolve: {
    alias: {
      "@main-css": path.resolve(__dirname, "./client/main.css"),
    },
  },
})

之后我在Vue组件的样式块里测试这个别名：用PostCSS的@import指令引入@main-css是完全正常的，但换成Tailwind CSS的@reference指令时，这个别名就完全不生效了，组件里的代码示例是这样的：

<style lang="postcss" scoped>
// 这个写法可以正常加载样式
@import '@main-css';

// 这个写法完全没反应，样式根本不生效
@reference '@main-css';
</style>

我已经反复确认过别名对应的文件路径是正确的，文件本身也确实存在，但就是搞不懂为什么@reference就是识别不了Vite配置的别名。有没有朋友遇到过类似的情况，或者知道问题出在哪、该怎么解决吗？麻烦大家指点一下，万分感谢！

内容来源于stack exchange