2024-07-15 vue组件发布npm后,再使用,样式不见了?==》查看样式是否在dist包里,有的话应该就是样式没引用

哎,嗯。。。emmm。。。

好,问题就是这样的,最近写了vue组件打算上到npm,然后上是上了,但是样式却没有生效??

左上角是组件样式本地调试的截图,可以看到是生效的,右上角的截图是我在别的项目引用了我写的这个库,结果样式却没有生效。

我打包后的文件列表如下:

 注意:style.css包含了所有的样式,但实际上被引用后并没有生效。

 原因:样式文件需要手动引入。我记得u-view组件库就是在引入了uview后还要引入它的css文件。问题就出在这里。
 解决方案:找到你的dist的样式文件路径,把它引入到main.js文件里,如:

import { createApp } from 'vue'

import App from "./App.vue";

import Iuniko from 'iuniko-ui';
import '/node_modules/iuniko-ui/dist/style.css'

const app = createApp(App);

app.use(Iuniko);
app.mount('#app');

哈哈,这问题刚开始时困扰了我大半天,后来还是掘金大佬提点了小子一下才知道原来问题在这里。

 

posted @ 2024-07-15 17:14  叶乘风  阅读(3)  评论(0编辑  收藏  举报