8***@qq.com
8***@qq.com
  • 发布:2025-03-09 17:39
  • 更新:2025-03-09 22:17
  • 阅读:79

【报Bug】HBuilderX 4.55 报错 4.45 正常 提到了一个css文件

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 4.55

手机系统: 全部

手机厂商: 华为

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

/ 分列式弹性盒子,以X轴从左到右排列 /
.h-flex-x{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
/align-items: center;/
/#ifdef H5/
padding-top: 3px;
/#endif/
align-content: center;

/* 水平左对齐 */  
&.h-flex-left{  
    justify-content: flex-start;  
}  

/* 水平居中对齐 */  
&.h-flex-center{  
    justify-content: center;  
}  

/* 水平右对齐 */  
&.h-flex-right{  
    justify-content: flex-end;  
}  

/* 水平两端对齐 */  
&.h-flex-space{  
    justify-content: space-between;  
}  

/* 垂直顶部对齐 */  
&.h-flex-top{  
    align-items: flex-start;  
    align-content: flex-start;  
}  

/* 垂直底部对齐 */  
&.h-flex-bottom{  
    align-items: flex-end;  
    align-content: flex-end;  
}  

/* 允许换行 */  
&.h-flex-wrap{  
    flex-wrap: wrap;  
}  

/* 等比分列,2-6列 */  
@for $i from 2 through 6  
{  
    &.h-flex-#{$i}{  
        &>view{  
            width:(100% / $i);  
        }  
    }  
}  

/* 弹性元素 */  
&>.h-flex-item-grow{  
    flex-grow: 1;  
    width:0;  
}  

}

/ 分行式弹性盒子,以Y轴从上到下排列 /
.h-flex-y{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;

/* 垂直居中对齐 */  
&.h-flex-center{  
    justify-content: center;  
    align-items: center;  
    align-content: center;  
}  

/* 水平左对齐 */  
&.h-flex-left{  
    align-items: flex-start;  
    align-content: flex-start;  
}  

/* 水平右对齐 */  
&.h-flex-right{  
    align-items: flex-end;  
    align-content: flex-end;  
}  

/* 垂直两端对齐 */  
&.h-flex-space{  
    justify-content: space-between;  
}  

/* 垂直顶部对齐 */  
&.h-flex-top{  
    justify-content: flex-start;  
}  

/* 垂直底部对齐 */  
&.h-flex-bottom{  
    justify-content: flex-end;  
}  

/* 等比分行,2-6行 */  
@for $i from 2 through 6  
{  
    &.h-flex-#{$i}{  
        &>view{  
            height:(100% / $i);  
        }  
    }  
}  

/* 弹性元素 */  
&>.h-flex-item-grow{  
    flex-grow: 1;  
    height: 0;  
}  

}

helang-flex.scss

操作步骤:

发行H5 打包 小程序调试均报错

预期结果:

4.45之前版本都正常 4.55无法正常打包

实际结果:

4.45之前版本都正常 4.55无法正常打包

bug描述:

报错提示

4.45版本正常 升级到4.55就报错无法打包调试

[HBuilder] 17:17:30.699 DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.  
[HBuilder] 17:17:30.700 Recommendation: math.div(100%, 3)  
[HBuilder] 17:17:30.700 More info and automated migrator: https://sass-lang.com/d/slash-div  
[HBuilder] 17:17:30.700     ╷  
[HBuilder] 17:17:30.700 798 │                         width: (100%/3);  
[HBuilder] 17:17:30.700     │                                 ^^^^^^  
[HBuilder] 17:17:30.700     ╵  
[HBuilder] 17:17:30.700     stdin 798:15  root stylesheet  
[HBuilder] 17:17:30.762 DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.  
[HBuilder] 17:17:30.762 Recommendation: math.div(100%, 3)  
[HBuilder] 17:17:30.762 More info and automated migrator: https://sass-lang.com/d/slash-div  
[HBuilder] 17:17:30.762      ╷  
[HBuilder] 17:17:30.762 1089 │                     width: (100%/3);  
[HBuilder] 17:17:30.762      │                             ^^^^^^  
[HBuilder] 17:17:30.763      ╵  
[HBuilder] 17:17:30.763     stdin 1089:14  root stylesheet  
[HBuilder] 17:17:30.763 DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.  
[HBuilder] 17:17:30.763 Recommendation: math.div(100%, 3)  
[HBuilder] 17:17:30.763 More info and automated migrator: https://sass-lang.com/d/slash-div  
[HBuilder] 17:17:30.763     ╷  
[HBuilder] 17:17:30.763 896 │                     width: (100%/3);  
[HBuilder] 17:17:30.763     │                             ^^^^^^  
[HBuilder] 17:17:30.763     ╵  
[HBuilder] 17:17:30.763     stdin 896:14  root stylesheet  
[HBuilder] 17:17:31.398 DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.  
[HBuilder] 17:17:31.398 Recommendation: math.div(100%, $i)  
[HBuilder] 17:17:31.398 More info and automated migrator: https://sass-lang.com/d/slash-div  
[HBuilder] 17:17:31.398    ╷  
[HBuilder] 17:17:31.398 57 │                 width:(100% / $i);  
[HBuilder] 17:17:31.398    │                        ^^^^^^^^^  
[HBuilder] 17:17:31.398    ╵  
[HBuilder] 17:17:31.398    ********\components\helang-tabBar\helang-flex.scss 57:12  @import  
[HBuilder] 17:17:31.398     stdin 149:9                                                                          root stylesheet  
[HBuilder] 17:17:31.416 DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.  
[HBuilder] 17:17:31.417 Recommendation: math.div(100%, $i)  
[HBuilder] 17:17:31.417 More info and automated migrator: https://sass-lang.com/d/slash-div  
[HBuilder] 17:17:31.417     ╷  
[HBuilder] 17:17:31.417 117 │                 height:(100% / $i);  
[HBuilder] 17:17:31.417     │                         ^^^^^^^^^  
[HBuilder] 17:17:31.417     ╵  
[HBuilder] 17:17:31.417     *************\components\helang-tabBar\helang-flex.scss 117:13  @import  
[HBuilder] 17:17:31.417     stdin 149:9                                                                           root stylesheet  
[HBuilder] 17:17:37.943 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):  
[HBuilder] 17:17:37.943 SassError: expected selector.  
[HBuilder] 17:17:37.943     ╷  
[HBuilder] 17:17:37.943 202 │                 /deep/ .uni-icons{  
[HBuilder] 17:17:37.943     │                 ^  
[HBuilder] 17:17:37.943     ╵  
[HBuilder] 17:17:37.943   *********************\components\helang-tabBar\tab-bar-bubble.vue 202:5  root stylesheet 
2025-03-09 17:39 负责人:无 分享
已邀请:
DCloud_UNI_FengXY

DCloud_UNI_FengXY

是不是使用的Arm版本,sass编译报错的最后有错误提示

HBuilderX Mac Arm 版 Vue2 sass 预编译器已由 node-sass 更换为 dart-sass,可能存在部分语法不兼容的问题(https://ask.dcloud.net.cn/question/205992)。
解决方案:

  1. 调整为 dart-sass 支持的语法,比如:将深度选择器 /deep/ 调整为 ::v-deep,官方网站:https://sass-lang.com/
  2. 使用 HBuilderX Mac Intel 版本,下载地址:https://www.dcloud.io/hbuilderx.html
  • 8***@qq.com (作者)

    4.45 之前的版本都打包调试都没问题,只有4.55出现这个问题 就是以后的版本都不支持这样了吗?

    2025-03-09 22:06

  • DCloud_heavensoft

    回复 8***@qq.com: 你原来是 intel 版还是 arm 版?

    2025-03-09 22:34

  • 8***@qq.com (作者)

    回复 DCloud_heavensoft: 应该是升级了什么功能导致,4.45之前的版本都正常,我是台式机windows11 属于intel版本吧。主要是说不支持写法了,但是很多项目以前是按这个写的。如果后面不兼容了就都需要重新写,我这个项目好像是用了插件市场里头一个插件采用到了这些写法。如果后续不支持了,那就要考虑重写所有项目,不然都会报错。主要插件市场里头也有好多这样的写法,如果不支持会有很大的兼容问题。

    2025-03-09 22:49

  • DCloud_UNI_FXY

    回复 8***@qq.com: 尝试下重新完整安装4.55版本?

    2025-03-10 00:11

9***@qq.com

9***@qq.com

这个问题我也出现了升级了HBuilderX 到4.5.5所有之前的项目全部出现同样的问题

要回复问题请先登录注册