uni-app 引入weui.wxss构建qq小程序时生成的app.qss被截断样式不生效但构建的微信小程序没问题

uni-app 引入weui.wxss构建qq小程序时生成的app.qss被截断样式不生效但构建的微信小程序没问题

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

示例代码：

@import './static/weui.wxss';

<view wx:if="aria-role="dialog" aria-modal="true">  
    <view class="weui-mask aria-role="button" aria-label="关闭"></view>  
    <view class="weui-half-screen-dialog weui-transition >  
        <view class="weui-half-screen-dialog__hd">  
            <view class="weui-half-screen-dialog__hd__side" >  
                <view aria-role="button" class="weui-btn_icon">关闭<i class="weui-icon-close-thin"></i></view>  
            </view>  
            <view class="weui-half-screen-dialog__hd__main">  
                <strong class="weui-half-screen-dialog__title">标题</strong>  
            </view>  
        </view>  
        <view class="weui-half-screen-dialog__bd" style="padding-top: 32px; height: 50px;">  
            可放自定义内容  
        </view>  
        <view class="weui-half-screen-dialog__ft">  
          <view class="weui-half-screen-dialog__btn-area">  
            <view aria-role="button" class="weui-btn weui-btn_default" bindtap="close">取消</view>  
            <view aria-role="button" class="weui-btn weui-btn_primary" bindtap="close">阅读并同意</view>  
          </view>  
          <view class="weui-half-screen-dialog__attachment-area">  
            <navigator class="weui-link" url="">附加操作</navigator>  
          </view>  
        </view>  
    </view>  
</view>

更多关于uni-app 引入weui.wxss构建qq小程序时生成的app.qss被截断样式不生效但构建的微信小程序没问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

22 回复

您好，麻烦发下可复现demo

更多关于uni-app 引入weui.wxss构建qq小程序时生成的app.qss被截断样式不生效但构建的微信小程序没问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


demo已上传，麻烦看一下

下载依赖，然后npm run build:mp-qq。即可查看。样式没有显示完整，如果格式化dist/build/app.qss 就可以了。同时npm run dev:mp-qq 是能够正常显示的。微信开发环境和生产都正常，只有qq不正常

发行模式下，uniapp只是拼接你的样式代码，运行样式不生效是qq小程序的问题。

那这个肯定有问题啊，无法引入外部样式了，说明兼容不到位啊。

能否build的时候保持和开发环境一样的，css处理。但是sourcemap 不一样。我没有看到这个配置

回复 7***@qq.com: 这只是hack，没有解决问题。毕竟这只是常用的引入外部样式

回复 7***@qq.com: 暂时不行，build的时候不压缩，体积也不允许啊，很容易就超了。sourcemap build 模式目前有问题，不会启用

回复 7***@qq.com: 另外，你也测试一下新建一个原生qq小程序，测试一下 weui 的样式是否生效

回复 DCloud_UNI_JBB: 那你们这边看下是什么原因吧。有一种解决方案是通过条件编译，直接原样引用外部css，不走uni的样式处理

回复 7***@qq.com: 至少这问题是普遍的兼容性问题，不可能让qq去适配uniapp的编译吧。应该是uniapp编译去适配平台

回复 7***@qq.com: 你说的条件编译是什么意思？

回复 DCloud_UNI_JBB: 回复 DCloud_UNI_JBB: 原生ok的，就是编译后不行

回复 DCloud_UNI_JBB: 就是让编译器不要编译条件编译里面的代码 import css ，样式文件直接放在static里面，这样就和原生一样了。就是不要走uniapp的样式处理器。直接copy代码

回复 DCloud_UNI_JBB: 有wx吗哥，上面沟通。wx：Xxx-loji

回复 7***@qq.com: https://im.dcloud.net.cn/index.html#/ im里面私聊

回复 DCloud_UNI_JBB: 进不去，wx吧，我加你

回复 DCloud_UNI_JBB: 密码试错太多次了，要两个小时后才能登录

哪个能进来啊，加微信传文件太麻烦了

来个id

回复 DCloud_UNI_JBB: 发你了哥

这是一个典型的QQ小程序编译时样式文件体积超限问题。QQ小程序的app.qss有严格的体积限制（通常为50KB），而微信小程序没有此限制。

当引入weui.wxss这种大型UI库时，编译后的app.qss很容易超出QQ小程序的限制，导致文件被截断，后续样式失效。

解决方案：

  1. 按需引入：不要全局引入整个weui.wxss，改为在需要的页面单独引入：
/* 在具体页面的style中 */
[@import](/user/import) './static/weui.wxss';
回到顶部