sonicsunsky
sonicsunsky
  • 发布:2021-12-15 11:37
  • 更新:2021-12-17 16:54
  • 阅读:610

uni-app vue3 使用vite编译到微信小程序端后修改页面中的样式保存后刷新页面显示异常, 样式会有错乱

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: Mac Monterey 12.0.1

HBuilderX类型: Alpha

HBuilderX版本号: 3.3.1

第三方开发者工具版本号: 1.05.2111300

基础库版本号: 2.21.0

项目创建方式: HBuilderX

示例代码:
<template>  
	<view class="page">  
		<view class="notice">  
			<view class="notice-icon"><i-icon name="news-fill" :size="24" color="#f56c6c"></i-icon></view>  
			<view class="notice-scorll" @tap="openNoticeDetail">  
				<view class="content" :class="[animation?'anim':'']">B站10分日本动漫已消失,9.9分仅剩12部,这一部动漫包揽三席!</view>  
			</view>  
		</view>  
	</view>  
</template>  
  
<script>  
import { reactive, toRefs, computed, onMounted } from 'vue'  
  
export default {  
	setup(props, context) {  
		const state = reactive({  
			animation:true  
		})  
  
		return {  
			...toRefs(state)  
		}  
	}  
}  
</script>  
  
<style lang="scss" scoped>  
.notice {  
	width: 100%;  
	box-sizing: border-box;  
	padding: 0 30rpx;  
	font-size: 24rpx;  
	height: 60rpx;  
	background-color: #fff8d5;  
	display: flex;  
	align-items: center;  
	position: fixed;  
	top: 0;  
	z-index: 1000;  
  
	&-scroll {  
		flex: 1;  
		margin-left: 20rpx;  
		line-height: 1;  
		white-space: nowrap;  
		overflow: hidden;  
		color: $u-error;  
  
		.content {  
			-webkit-backface-visibility: hidden;  
			-webkit-perspective: 1000;  
			transform: translate3d(100%, 0, 0);  
  
			&.anim {  
				-webkit-animation: rolling 12s linear infinite;  
				animation: rolling 12s linear infinite;  
			}  
		}  
	}  
}  
</style>

操作步骤:

运行微信小程序成功后更改某个页面里的样式后保存刷新

预期结果:

微信小程序刷新后页面显示正常

实际结果:

微信小程序刷新后页面显示异常

bug描述:

修改页面scss样式保存后,项目差量编译后刷新微信小程序页面显示异常,样式会有错乱

更新到最新hbuildx 3.3.1.20211214-alpha 版本之后出现这个问题,上一个版本没有这个问题

增加部分scss样式编译后并没有生效,查看IDE开发工具发现新增加的css样式没有拷贝过来

第一个图片是增加scss样式没有生效,第二个图片是改动scss样式后,重新点击IDE开发工具的编译按钮刷新,发现项目首页样式错乱

需要hbuilderX重新运行才能恢复正常

2021-12-15 11:37 负责人:无 分享
已邀请:
DCloud_UNI_LXH

DCloud_UNI_LXH

修改 scss 后,编译成的 css 缺少对应的修改?

使用其他工具直接打开 scss 文件查看一下是否真的有改动

  • sonicsunsky (作者)

    scss样式修改后保存刷新或者点击IDE开发工具的编译按钮后页面会发生异常,在上一个版本的时候是正常的


    2021-12-20 16:14

  • sonicsunsky (作者)

    上边第二个图就是改动某个页面scss样式后首页发生的异常


    2021-12-20 16:16

DCloud_UNI_FXY

DCloud_UNI_FXY

未重现,建议发送一个测试工程,说明测试步骤

  • sonicsunsky (作者)

    已添加示例代码,可以测试那个样式没有生效的问题


    2021-12-20 15:28

  • sonicsunsky (作者)

    然后你在里边添加/改动一些样式,点击IDE开发工具的编译按钮看看有没有页面显示上的问题,可以多点击几次编译按钮


    2021-12-20 15:30

  • DCloud_UNI_FXY

    回复 sonicsunsky: 无法重现


    2021-12-20 16:40

  • sonicsunsky (作者)

    回复 DCloud_UNI_FXY: 稍等我传一个demo吧


    2021-12-20 17:17

  • sonicsunsky (作者)

    回复 DCloud_UNI_FXY: 试试那个demo, 我这边的css样式没生效


    2021-12-20 17:29

  • sonicsunsky (作者)

    回复 DCloud_UNI_FXY: 测试环境是微信小程序开发工具1.0.5 2111300+vue3.x+Hbuilderx 3.3.2.20211218-alpha+Mac monterey


    2021-12-20 17:35

  • DCloud_UNI_FXY

    回复 sonicsunsky:

    测试没问题,运行至微信开发工具:1.06.2110290,修改 index.vue 中的样式,小程序会同步更新

    HBuilderX 3.3.2.20211218-alpha

    macOS Monterey 12.1


    2021-12-20 17:59

  • sonicsunsky (作者)

    回复 DCloud_UNI_FXY: 你选择vue3了没有?你运行之后顶部文字是否有滚动效果?没有的话还是样式没有生效


    2021-12-21 09:05

  • DCloud_UNI_LXH

    回复 sonicsunsky: 提供的 demo 类名书写错误。且使用 alpha 3.3.2 运行至 mp-weixin 后,修改样式并没有复现你说的问题


    2021-12-21 16:38

  • sonicsunsky (作者)

    回复 DCloud_UNI_LXH: 好的,我再检查一下类名


    2021-12-21 16:54

小枫叶

小枫叶 - 外包接单加v:wlmk1234567 注明来意

首先,这边希望您看一下scss文件的使用方式,是style对象引入,还是class引入 ,
如果您这边是使用 style 对象引入 则参考
另外一个相似的问题

如果您的问题跟上述无关,希望发个demo出来

该问题目前已经被锁定, 无法添加新回复