可共享的 Vite/Vue 组件 - 为什么我会收到有关缺少 CSS 导出的错误？

Question

我一直在关注这个视频，通过 Vite 构建一个可共享的 Vue 组件，然后我通过

npm link

将其放入另一个项目中进行测试。

通过

npm run bulid

使用 Vite 构建然后链接后，我最终在我的其他项目的

node_modules

目录中得到了这个结构：

- mycomponent
    - dist
        - style.css
        - mycomponent.es.js
        - mycomponent.umd

我可以成功导入我的组件 - 但它缺少 CSS！所以根据上面的视频我需要做（在我的

main.js

中）：

import MyComponent from 'mycomponent'
import 'mycomponent/dist/style.css'
...
const app = createApp(App)
    .use(...)
    .use(Mycomponent)

我真的不希望它以这种方式在全球范围内可用，但我只是想解决 CSS 问题。无论如何，这会导致以下错误：

[插件：vite：导入分析]“mycomponent”包中缺少“./style.css”导出

我做错了什么？鉴于我的组件是作为 SFC 构建的，为什么我还需要单独导入其 CSS？并且文件

/dist/style.css

确实存在。

这是我的组件的

package.json

>

exports

，顺便说一句：

  "exports": {
    ".": {
      "import": "./dist/mycomponent.es.js",
      "require": "./dist/mycomponent.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },

提前谢谢您！

Answer 1

导出是一个键/映射，应该在导入中进行镜像。

就我而言，我有

"./style.css": "./dist/style.css"

因此，尝试

import 'my-lib/dist/style.css'

时出现此错误，该错误在将导入与导出中的密钥匹配时得到解决：

import 'my-lib/style.css'