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

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出来

要回复问题请先登录注册