uni-app 更新版本后，项目启动h5报错

uni-app 更新版本后，项目启动h5报错

开发环境 版本号 项目创建方式
HbuilderX 3.1.16 
示例代码：


09:23:19.823  INFO  Starting development server...  
09:23:47.349 Module build failed (from ./node_modules/sass-loader/dist/cjs.js):  
09:23:47.354 SassError: Invalid CSS after " }": expected selector, was ","  
09:23:47.355         on line 170 of /{路径省略}/XXInputPopup.vue  
09:23:47.361 >>     ,  
09:23:47.361    -^  
09:23:47.364 Module build failed (from ./node_modules/sass-loader/dist/cjs.js):  
09:23:47.364 SassError: Invalid CSS after "}": expected selector, was ","  
09:23:47.367         on line 158 of /{路径省略}/XXServerCard.vue  
09:23:47.367 >> },  
09:23:47.370    -^  
09:23:47.370 Module build failed (from ./node_modules/sass-loader/dist/cjs.js):  
09:23:47.373 SassError: Invalid CSS after "}": expected selector, was ","  
09:23:47.373         on line 170 of /{路径省略}/XXCard.vue  
09:23:47.379 >> },  
09:23:47.379    -^

操作步骤：

更新版本后，项目启动h5报错

预期结果：

更新版本不影响项目的正常运行

实际结果：

更新版本后，项目启动h5报错

bug描述：

更新版本后，项目启动h5报错


更多关于uni-app 更新版本后，项目启动h5报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

看提示是你代码中css的分隔符问题,建议再看一下代码.

更多关于uni-app 更新版本后，项目启动h5报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


从错误信息来看，这是Sass语法解析错误，主要问题出现在多个Vue组件的CSS代码中。错误提示显示在}后面出现了不合法的,逗号，这通常是由于Sass/SCSS语法不规范导致的。

具体分析：

  1. 错误发生在XXInputPopup.vue、XXServerCard.vue、XXCard.vue这三个组件中
  2. 错误位置分别在170行、158行、170行附近
  3. 错误类型都是SassError: Invalid CSS after "}"

可能的原因和解决方案：

1. 检查Sass嵌套语法 在SCSS中，嵌套规则结束后不应该有逗号。检查相关文件的CSS部分，特别是：

  • 媒体查询嵌套
  • 选择器嵌套
  • 混合器(mixin)使用

2. 版本兼容性问题 HBuilderX 3.1.16可能更新了sass-loader或相关依赖版本，对语法检查更严格。检查：

npm list sass-loader
npm list sass

确认版本兼容性。

3. 清理缓存重新安装

rm -rf node_modules
rm package-lock.json
npm install
回到顶部