uni-app 编译小程序输出到dist目录丢失wxss文件
uni-app 编译小程序输出到dist目录丢失wxss文件
示例代码:
见复现步骤
操作步骤:
页面代码如下
<template>
<div class="wrap">
<uni-list v-for="(item, idx) in list" :key="idx">
<uni-list-item> </uni-list-item>
</uni-list>
<uni-badge text="1"></uni-badge>
</div>
</template>
<script>
import { uniList, uniListItem, uniBadge } from "@dcloudio/uni-ui";
export default {
components: {
uniList,
uniListItem,
uniBadge,
},
data() {
return {
list: [1, 2, 3],
};
},
};
</script>
<style lang="scss" scoped>
.wrap {
font-size: 14rpx;
}
</style>
预期结果:
预期 dist\dev\mp-weixin\node-modules\@dcloudio\uni-ui\lib\uni-list-item目录下,4个文件齐全,即wxml,json.js,wxss
实际结果:
发现只会编译出wxml,json,js,丢失了wxss
另外,uni-list目录编译出了wxss,见附件图片
bug描述:
页面引入了uni-ui组件
使用npm run dev:mp-weixin编译,输出后缺少wxss。导致微信开发者工具无法编译。

| 信息类型 | 详细信息 |
|---|---|
| 产品分类 | uniapp/小程序/微信 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | Windows 10 专业版 20H2 |
| 第三方开发者工具版本号 | 1.05.2108242 |
| 基础库版本号 | 2.19.2 |
| 项目创建方式 | CLI |
| CLI版本号 | “@vue/cli-service”: “~4.5.0” |
更多关于uni-app 编译小程序输出到dist目录丢失wxss文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html
社区有人负责吗?hello?
更多关于uni-app 编译小程序输出到dist目录丢失wxss文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个问题通常是由于 uni-app 在编译 uni-ui 组件时,样式文件处理机制导致的。从你的描述来看,uni-list-item 组件缺少了对应的 wxss 文件,而 uni-list 组件却正常生成了 wxss。
可能的原因和解决方案:
-
检查 uni-ui 版本兼容性 确保你使用的 uni-ui 版本与当前 uni-app 版本兼容。可以尝试升级到最新版本:
npm update [@dcloudio](/user/dcloudio)/uni-ui -
清理缓存重新编译 删除
node_modules、dist目录,并清理 npm 缓存后重新安装:rm -rf node_modules dist npm cache clean --force npm install npm run dev:mp-weixin -
检查组件导入方式 确认组件是否完整导入。虽然你的代码看起来正确,但可以尝试修改导入方式:
import uniList from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-list/uni-list.vue' import uniListItem from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-list-item/uni-list-item.vue' import uniBadge from '[@dcloudio](/user/dcloudio)/uni-ui/lib/uni-badge/uni-badge.vue' -
检查 uni-app 编译器配置 在
vue.config.js中添加以下配置(如果没有该文件则创建):module.exports = { transpileDependencies: ['[@dcloudio](/user/dcloudio)/uni-ui'] }

