8***@qq.com
8***@qq.com
  • 发布:2025-03-09 17:39
  • 更新:2025-03-18 01:50
  • 阅读:2879

HBuilderX 4.5+ vue2 项目 scss编译报错

分类: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

背景:
vue2使用的scss编译器是node-sass。但该编译器其官方已经不维护了。且不支持arm cpu。
从vue3起,使用的是官方主推的dart-sass。dart-sass语法和node-sass有一些区别,比如深度选择器。
如果使用node-sass的专用语法,在dart-sass上会无法编译。

HBuilderX在mac上arm版(即m系列cpu专版),因为只有dart-sass可用,所以无法支持node-sass的专用语法库,vue2的开发者如果一定要使用node-sass,需要在mac上改用Intel版。

HBuilderX 非 Mac Arm 版本的编译报错问题。

解决方案:
方案1. 修改已经废弃的node-sass写法。比如:将深度选择器 /deep/ 调整为 ::v-deep,详情:https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-preprocessor
方案2. 如果您希望继续使用node-sass,确保 HBuilderX 已经升级到 4.56+, 然后在manifest.json根节点配置: "sassImplementationName": "node-sass",详情:https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-preprocessor

官方推荐使用方案1。HBuilderX最新版4.56+,默认是dart-sass,只是可以在manifest里额外配置使用node-sass。
统一为dart-sass,有利于多人协作和插件市场生态发展。不然有人用node-sass、有人用dart-sass会造成很多混乱。

使用的是HBuilderX Mac Arm 版本

建议参考上述方案1,修改已废弃的语法以支持dart-sass。
如果您仍希望继续使用node-sass,需要更换为 HBuilderX Mac Intel 版本(4.56+),下载地址:https://www.dcloud.io/hbuilderx.html。然后参考上述方案2,在manifest.json中配置"sassImplementationName": "node-sass"

这个问题仅在vue2上出现,我们仍然推荐开发者尽可能的升级vue3和dart-sass

  • 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

  • 俞19

    回复 8***@qq.com: 你好,请问你最后怎么处理的

    2025-03-10 09:13

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

    回复 俞19: 现在只能暂时退回上一版,不然修改的项目太多了。官方的插件市场会有大量的都会报错。官方应该会想办法兼容毕竟之前版本都正常。

    2025-03-10 09:32

  • 俞19

    回复 8***@qq.com: 噢噢 好的,我官方的部分倒没有报错,,都是自己写的一些scss部分,有错误

    2025-03-10 09:51

  • 橘子辉煌

    11号了 还没解决吗

    2025-03-11 10:02

  • 7***@qq.com

    回复 橘子辉煌: 66

    2025-03-17 18:09

  • 1***@qq.com

    回复 DCloud_UNI_FXY: 回复 DCloud_UNI_FXY: 都不行怎么办啊?

    2025-03-18 05:53

  • 1***@qq.com

    官方给的解决方案不太现实啊,第一要重新做了,第二加了没有用,请问官方发布前不测试吗?

    2025-03-18 05:55

  • DCloud_UNI_FengXY

    回复 1***@qq.com: HBuilderX版本升级到4.56+,manifest.json根节点加了"sassImplementationName": "node-sass",还不行?只要用的不是Mac Arm的就应该生效的。

    2025-03-18 11:21

1***@163.com

1***@163.com

一样的问题,早上上班打开hbuilder,提示有插件更新,点击更新之后,运行项目就报错了,然后去npm看到这两天有新的版本,就知道有东西更新坏了。主要是我回退版本,运行还是报错,心累。然后看到提示错误里面有mini-css-extract-plugin,又去github看, 看到近期有人提的关于mini-css-extract-plugin,也不知道有没有关系。然后又跑来这个社区看问题。不过用最上面的解决方案“方案1. 下载附件,解压覆盖:HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-hbuilderx/module-alias.js”解决了

  • 宝藏程序员

    你这个有效,谢谢,官方方法无效

    2025-03-18 13:03

  • DCloud_UNI_FengXY

    回复 宝藏程序员: 你说的官方方法无效,是指的在manifest.json中配置"sassImplementationName": "node-sass"无效吗?

    2025-03-19 16:14

2***@qq.com

2***@qq.com

服了 发布前不测的吗

9***@qq.com

9***@qq.com

逆天玩意

梦尋Junjie

梦尋Junjie - 原来她有男朋友

100% / $i 主要是这个 / 斜杠不支持 , 你可以换成 乘法来实现, 不过对于非固定数就麻烦了

还有 ::v-deep , 以前是 /deep/ ,现在需要 ::v-deep

9***@qq.com

9***@qq.com

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

  • DCloud_heavensoft

    你是Windows还是Mac?如果是 arm,参考上面

    2025-03-09 22:33

  • 9***@qq.com

    回复 DCloud_heavensoft: 我是windows的

    2025-03-09 22:38

  • DCloud_UNI_FXY

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

    2025-03-10 00:12

  • 俞19

    我也出现了,好几个同事都是同样的情况。。。都是win11的系统,4.5正常使用,4.55后报sass不支持某些写法了。 大周一的 给我加了好多工作量

    2025-03-10 09:02

  • cures

    回复 俞19: 直接回退到上一版,就能正常编译

    2025-03-10 09:23

  • 俞19

    回复 cures: 这个我知道呀,那我总不可能停留在上个版本不更新了吧。

    2025-03-10 09:27

  • cures

    回复 俞19: 先回退,等处理呗,自己去改代码太麻烦了

    2025-03-10 09:29

  • 俞19

    回复 cures: 我自己改了。因该不会迁就的,,大概10来分钟就改完了,全局搜下,没多少内容的,,

    我这个项目是vue2的,之前做过升级vue3的相关工作,那时候报的也是这些错误

    2025-03-10 09:50

w***@qq.com

w***@qq.com - .net、Java和app开发工程师

我的也一样,更新最新版本就出现这个问题,无法编译

Mrduang

Mrduang

一样的问题,报了一大堆错误,心累,只能回退版本

m***@163.com

m***@163.com

今天更新后, 疯狂报 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js):
16:13:27.238 SassError: expected selector.
16:13:27.238 ╷
16:13:27.238 68 │ /deep/ *{
错误;

没升级之前都好的,现在回退到上一版本也不行了

  • m***@163.com

    更换那个module-alias.js 好了

    2025-03-11 17:59

  • 3***@qq.com

    一样的错误,回退了下版本到4.45然后把插件里的uniapp-vue2和vue3编译器删掉重新下了一遍就好了

    2025-03-12 13:40

y***@bvxsx.com

y***@bvxsx.com

这错误也太低级了啊,更新完项目都跑不起来,我还以为见鬼了!

w***@163.com

w***@163.com

windows版本的4.55,同样问题,用vue2的一定也不少人,让每个人都去改代码也不现实

s***@qq.com

s***@qq.com - 马农

经常这样搞太不专业了,真的, 已经无力吐槽

1***@163.com

1***@163.com

这是我见过最逆天的更新,PM和负责更新的应该要出来背锅的,不兼容的硬性更新会导致会很多使用旧代码的项目直接崩塌的,尤其是涉及到sass语法糖最多的前端项目,直接把编译机制改了,然后有些项目基本上没办法运行

DCloud

DCloud

HBuilderX 4.56.2025031210 已修复。

  • 9***@qq.com

    修复你奶奶个腿

    2025-03-13 12:28

  • 小旺仔

    回复 9***@qq.com: 最新版本还是不行吗?

    2025-03-13 14:31

  • 1***@qq.com

    根本不行啊!

    2025-03-18 10:04

  • 2***@qq.com

    回复 9***@qq.com: 这么直抒胸臆的发言很少见了。

    2025-03-18 14:49

  • DCloud_heavensoft

    回复 9***@qq.com: 修复说的是提供了选择node-sass的选项,但默认还是dart-sass。

    2025-03-18 18:12

w1001616

w1001616 - wxp_pro

@return #{$rpx * 100 / 750}vmin;

这个如何处理呢

  • w***@qq.com

    manifest.json加一个"sassImplementationName": "node-sass",就可以了

    2025-03-14 14:46

w***@qq.com

w***@qq.com - .net、Java和app开发工程师

manifest.json加一个"sassImplementationName": "node-sass",就可以了

1***@qq.com

1***@qq.com

真是开了天大个玩笑
这样谁以后还敢用!

  • DCloud_heavensoft

    认真看最佳答案好不好?有后退选项

    2025-03-18 01:49

  • w***@qq.com

    回复 DCloud_heavensoft: 那个参数设置了也还是编译失败!还能怎么搞?4.56的版本,WINDOWS的

    2025-03-18 10:33

  • DCloud_UNI_FengXY

    回复 w***@qq.com: 编译失败,报什么错误?

    2025-03-18 18:11

要回复问题请先登录注册