描述问题

我正在使用 Nx 的 monorepo,其中包含 Stylus 的 CSS预处理器和 Storybook v7 以及 Vite 的 bundler。我的目标是使用共享样式库来为 React 和 Vue3 UI组件库提供支持。我已经通过这个解决方案解决了捆绑问题，我的库在 @import 解析过程中完全没有问题。但是 Storybook 在任何配置下都无法独立工作。
在前端，我在控制台得到了：

[vite] Internal server error: [postcss] /Users/.../libraries/vue-ui/src/lib/Badge/Badge.vue?vue&type=style&index=0&scoped=681721c9&lang.stylus:1:1: Unknown word
  Plugin: vite:css
  File: /Users/.../libraries/vue-ui/src/lib/Badge/Badge.vue?vue&type=style&index=0&scoped=681721c9&lang.stylus:1:1
  1  |  
     |   ^
  2  |    @import "~@mydse/styles/components/Badge.styl"

在控制台：

[vite] Internal server error: [postcss] /Users/.../libraries/vue-ui/src/lib/Badge/Badge.vue?vue&type=style&index=0&scoped=681721c9&lang.stylus:1:1: Unknown word
  Plugin: vite:css
  File: /Users/.../libraries/vue-ui/src/lib/Badge/Badge.vue?vue&type=style&index=0&scoped=681721c9&lang.stylus:1:1
  1  |  
     |   ^
  2  |    @import "~@mydse/styles/components/Badge.styl"

如何解决这个问题？

重现问题

看起来只要在 stylus 文件或 Vue 样式部分中使用 @import ...,就会引发问题。所有项目都是使用 Nx 库生成的。

系统环境

Environment Info:

  System:
    OS: macOS 13.4
    CPU: (12) arm64 Apple M2 Max
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Firefox: 114.0.1
    Safari: 16.5
  npmPackages:
    @storybook/addon-essentials: 7.0.22 => 7.0.22 
    @storybook/core-common: ^7.0.22 => 7.0.22 
    @storybook/core-server: 7.0.22 => 7.0.22 
    @storybook/react: 7.0.22 => 7.0.22 
    @storybook/react-vite: 7.0.22 => 7.0.22 
    @storybook/vue3: ^7.0.22 => 7.0.22 
    @storybook/vue3-vite: 7.0.22 => 7.0.22

其他相关信息

• 无响应*