如何调试Laravel 9+Vite中‘Error: Expected a backslash preceding the semicolon’错误？

问题分析 #

你遇到的错误提示Error: Expected a backslash preceding the semicolon，在移除Tailwind的@tailwind指令后消失，且回滚代码无法解决，说明问题并非出自业务代码本身，大概率是依赖缓存、版本冲突或PostCSS/Tailwind的解析环境异常导致。

解决方案 #

按以下步骤逐一排查修复：

1. 彻底清理依赖并重新安装

缓存的依赖文件可能损坏或版本不兼容，执行以下操作：

• 删除依赖目录和锁文件：

  # macOS/Linux
  rm -rf node_modules package-lock.json
  # Windows
  rmdir /s node_modules && del package-lock.json
  

• 重新安装依赖：

  npm install
  

2. 清理Vite与Laravel缓存

Laravel和Vite的缓存可能干扰编译流程：

• 清理Laravel框架缓存：

  php artisan cache:clear
  php artisan config:clear
  

• 清理Vite编译缓存：

  npx vite --clear-cache
  

3. 升级不兼容的依赖版本

当前使用的laravel-vite-plugin@0.2.1版本较旧，与Vite 2.9.x、Laravel 9可能存在兼容性问题，建议升级到适配版本：

# 升级laravel-vite-plugin和Vite到兼容版本
npm install laravel-vite-plugin@^0.7.0 vite@^3.2.0 --save-dev

# 同步更新Tailwind相关依赖到最新兼容版
npm install tailwindcss@latest postcss@latest autoprefixer@latest --save-dev

4. 调整PostCSS配置确保解析顺序

Tailwind指令需要PostCSS按正确顺序处理，添加postcss-import插件并调整配置：

• 安装插件：

  npm install postcss-import --save-dev
  

• 修改postcss.config.js：

  module.exports = {
    plugins: {
      'postcss-import': {},
      tailwindcss: {},
      autoprefixer: {},
    },
  };
  

5. 排查CSS文件的隐性格式问题

偶尔文件编码或隐藏特殊字符会导致解析错误：

• 将原CSS文件内容复制到一个新建的纯文本文件中，替换原文件；
• 确保文件编码为UTF-8，无BOM头。

测试验证 #

每完成一步操作后，执行npm run dev或npm run build验证错误是否消失，若某一步解决问题即可停止后续操作。

内容的提问来源于stack exchange，提问作者NicolasSC