Laravel 8（PHP7）安装Laravel Breeze Starter Kit后Tailwind CSS样式无法加载的问题咨询

我来帮你排查下这个问题——核心原因是Laravel 8 默认用 Webpack Mix 编译资源，但你装的 Breeze 版本大概率是针对 Laravel 9+ 的，这些版本的 Breeze 默认用 Vite 来处理资源。你的项目没配置 Vite，所以 @vite 指令没被解析，直接输出到页面上，导致样式加载失败。

下面给你两种可行的解决方案，选一种适合你的就行：

方案一：改用适配 Laravel 8 的 Breeze 版本（用 Webpack Mix） #

这个方案更贴合 Laravel 8 的默认配置，不用额外折腾 Vite：

1. 先卸载当前的 Breeze 包：

   composer remove laravel/breeze
   

2. 安装专门针对 Laravel 8 的 Breeze 1.x 版本：

   composer require laravel/breeze:1.x --dev
   

3. 重新运行 Breeze 的安装命令：

   php artisan breeze:install
   

4. 安装前端依赖并编译资源：

   npm install && npm run dev
   

完成后，模板里会自动换成 mix() 指令，Tailwind CSS 样式就能正常加载了。

方案二：在 Laravel 8 中配置 Vite（保留 Vite 编译） #

如果你想继续用 Vite，需要手动给 Laravel 8 补上 Vite 的配置：

1. 安装 Vite 相关依赖：

   npm install laravel-vite-plugin vite --save-dev
   

2. 在项目根目录创建 vite.config.js 文件，粘贴以下内容：

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
       ],
   });
   

3. 打开 package.json，把 scripts 部分替换成：

   "scripts": {
       "dev": "vite",
       "build": "vite build"
   }
   

4. 确保你的 Laravel 8 版本至少是 8.83.0（这个版本才支持 @vite 指令），如果版本偏低，执行升级：

   composer update laravel/framework:^8.83.0
   

5. 安装依赖并编译资源：

   npm install && npm run dev
   

6. 注意：开发时要确保 Vite 开发服务器在运行（npm run dev 会启动它），生产环境则用 npm run build 生成打包后的资源文件。

额外提醒：检查你的 .env 文件里的 APP_URL 是否和本地开发地址一致，Vite 需要正确的 URL 来加载资源。

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