我一直在关注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"
},
型
在此先谢谢您!
1条答案
按热度按时间nnvyjq4y1#
导出是一个键/Map,应该在导入中镜像。
在我的例子中,我有
"./style.css": "./dist/style.css"
,所以在尝试import 'my-lib/dist/style.css'
时遇到了这个错误,在将导入与导出的键匹配时解决了这个错误:import 'my-lib/style.css'