uni-app 最新版HBuilder编译sass报错

uni-app 最新版HBuilder编译sass报错

开发环境 版本号 项目创建方式
HbuilderX 3.1.16 -

操作步骤：

新版sass编译报错，退回旧版没有问题

预期结果：

sass编译成功，正常运行或发行项目

实际结果：

sass编译报错，不能运行或打包项目

bug描述：

DEPRECATION WARNING on line 257 of stdin:
17:06:54.151 The operation `#2c3049 times 0.8` is deprecated and will be an error in future versions.
17:06:54.151 Consider using Sass's color functions instead.
17:06:54.155 http://sass-lang.com/documentation/Sass/Script/Functions.html#other_color_functions
17:06:56.972 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
17:06:56.972 ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
17:06:56.975 SassError: Invalid UTF-8 sequence
17:06:56.975         on line 1 of D:/giteeProject/wireless-assistant/components/foot-menu/foot-menu.scss
17:06:56.978         from line 148 of D:\giteeProject\wireless-assistant\components\foot-menu\foot-menu.vue

更多关于uni-app 最新版HBuilder编译sass报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

什么项目呢？普通项目？还是uniapp-cli项目？

更多关于uni-app 最新版HBuilder编译sass报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


普通uniapp项目非cli

最新版依然有这个问题，sass只要有中文注释就不能编译，旧版没有这个问题

出现这个问题是 由于使用了 utf-8编码造成的, 你主要把 所有的 注释 以及 content 属性, 里面的中文去除或者转义 我也是刚刚更新就中招了 ,
不会吧不会吧 程序员都这么自信的吗

我出现这种情况是 scss 文件的字符编码有问题, 你可用尝试着改变文件编码来解决这个问题, 我是使用eclispe 打开出现问题的文件 然后你就会看到注释乱码的信息, 我只有一个scss 文件报错, 所以我使用记事本打开文件 然后复制 在然后粘贴在eclispe里面保存, 然后在覆盖原来的文件(我是拷贝了一份出来的)

这个报错主要是由两个问题导致的：

  1. Sass语法过时警告：#2c3049 times 0.8 这种乘法运算在Sass新版本中已被弃用
  2. UTF-8编码错误：文件编码格式不兼容导致编译失败

解决方案：

针对语法问题： 将过时的颜色运算改为使用Sass的颜色函数：

// 旧语法（已弃用）
color: #2c3049 * 0.8;

// 新语法
color: scale-color(#2c3049, $lightness: -20%);
// 或者使用 rgba 函数
color: rgba(#2c3049, 0.8);

针对编码问题：

  1. 检查 foot-menu.scss 文件的编码格式，确保为 UTF-8
  2. 在 HBuilderX 中：文件 → 以指定编码重新打开 → UTF-8
  3. 删除文件中的BOM头（如果有的话）

临时解决方案： 如果急需编译，可以暂时回退到旧版Sass：

npm uninstall sass
npm install sass@1.32.13
回到顶部