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

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

bug描述：

修改页面scss样式保存后，项目差量编译后刷新微信小程序页面显示异常。

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

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

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

需要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>
`