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

pgccezyw  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(106)

我一直在关注this video,通过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问题。无论如何,这导致以下错误:

[plugin:vite:import-analysis]“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"
  },


在此先谢谢您!

nnvyjq4y

nnvyjq4y1#

导出是一个键/Map,应该在导入中镜像。
在我的例子中,我有"./style.css": "./dist/style.css",所以在尝试import 'my-lib/dist/style.css'时遇到了这个错误,在将导入与导出的键匹配时解决了这个错误:import 'my-lib/style.css'

相关问题