为什么 Laravel 不加载随 Laravel Breeze Starter Kit 安装的 Tailwind css 样式？

Question

我有一个 Laravel 8 项目，使用 PHP7，想尝试一下 Laravel Breeze，但是根据 Laravel 文档安装后，Tailwind 样式没有反映在我的登录和注册页面上。

页面顶部有一个损坏的脚本加载 @vite('resources/css/app.css', 'resources/js/app.js')

我检查了 app.blade.php 和 guest.blade 并发现 @vite('resources/css/app.css', 'resources/js/app.js') 正在加载到 head 部分。

这里缺少什么？我需要不同的配置来编译我的资产吗？

Answer 1

在网上搜索后，我发现 Laravel Breeze 附带了 Vite 配置，而不是 webpack。从https://laravel-vite.dev/我发现我没有在 Laravel 中使用 Vite 编译资产的最低要求：

• Laravel 包需要 PHP 8.0 或更高版本。
• Vite 插件需要 Node 16.15.1 或更高版本。

我有 PHP 7 和 Node 16.15.0。

要解决这个问题：

1-使用以下内容更新 webpack.mix.js 文件：

```
 mix.js("resources/js/app.js", "public/js")
      .postCss("resources/css/app.css", "public/css", [
        require("tailwindcss"),
      ]);
```

2-在app.blade.php head和guest.blade.php head中，为了加载编译的tailwind css和alpinejs，将@vite('resources/css/app.css', 'resources/js/app.js')替换为：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script defer src="{{asset('js/app.js')}}"></script>

3-将 tailwind.config.js 内容道具替换为

 content: [
         "./resources/**/*.blade.php",
         "./resources/**/*.js",
         "./resources/**/*.vue",
       ],

npm run dev && npm run watch 后，又亮了。