uniapp [plugin:vite:css] expected ";" 报错如何解决？

在使用uniapp开发时遇到[vite:css]报错，提示"expected ;"。检查了代码中的CSS部分，分号都正常添加了，但依旧报错。请问这个问题该如何解决？是否与vite配置或uniapp版本有关？求具体排查步骤和解决方案。

2 回复

检查CSS代码中是否缺少分号，特别是最后一行。常见于嵌套写法或伪类选择器。建议使用CSS格式化工具检查语法。


在UniApp开发中，[plugin:vite:css] expected ";" 错误通常是由于CSS/SCSS语法不规范导致的。以下是常见原因和解决方法：

1. 检查CSS/SCSS语法

  • 确保所有CSS规则正确闭合，属性值以分号结尾
  • 检查是否有未闭合的括号、引号或注释

示例错误代码：

.container {
  color: red  /* 缺少分号 */
  font-size: 16px
}

修正后：

.container {
  color: red;  /* 添加分号 */
  font-size: 16px;
}

2. 检查SCSS嵌套语法 如果使用SCSS，确保嵌套规则正确：

.parent {
  color: blue;
  
  .child {
    font-size: 14px;  // 确保嵌套内容正确闭合
  }  // 这个花括号必须存在
}    // 父级花括号必须闭合

3. 检查自定义样式文件

  • 检查所有通过@import引入的样式文件
  • 检查uni.scss文件中的语法
  • 检查组件内<style>标签中的样式

4. 清理缓存重新编译

# 清除编译缓存
rm -rf node_modules/.vite
# 重新安装依赖
npm install
# 重新运行项目
npm run dev

5. 检查编辑器设置 确保代码编辑器没有隐藏的特殊字符或编码问题。

按照以上步骤排查，通常可以解决这个CSS语法错误。重点检查最近修改的样式代码段。

回到顶部