显示侧边栏

升级指南

按照本指南将项目从 Flux v1.x 升级到 v2.x。

前置条件

在升级到 Flux v2 之前，请确保具备以下条件：

Laravel 版本 10 或更高
Livewire 版本 3.5.19 或更高
Tailwind CSS 版本 4 或更高

Flux v2 基于 Tailwind CSS v4 构建，如果你正在使用更旧版本的 Tailwind CSS，请按照 Tailwind CSS 升级指南升级到 v4 或更高版本。

更新 Flux

运行以下 composer 命令，将应用中的 Flux 与 Flux Pro 依赖升级到 v2：

composer require livewire/flux:^2.0 livewire/flux-pro:^2.0

重命名 @fluxStyles

在 Flux v2 中，@fluxStyles 指令已被移除，这些样式现在会直接导入到你的 app.css 文件中。

不过，新增了 @fluxAppearance 指令，用作替代以管理应用的深色模式——它会控制 .dark 类在 <html> 元素上的应用。

<head>    ...--    @fluxStyles++    @fluxAppearance</head>

清理视图缓存

在应用根目录运行以下 Artisan 命令，以清除任何已缓存/已编译的 Blade 视图：

php artisan view:clear

Tailwind 配置

由于 Flux 的样式不再通过 @fluxStyles 指令注入，你需要将 Flux 的 CSS 文件直接导入到 ./resources/css/app.css 文件中，如下所示：

@import "tailwindcss";@import '../../vendor/livewire/flux/dist/flux.css';/* Required for dark mode in Flux... */@custom-variant dark (&:where(.dark, .dark *));...

迁移强调色

如果你此前在 app.css 与 tailwind.config.js 中自定义了强调色，那么现在需要在 app.css 中进行更新。

之前，这些内容在 app.css 中通过单个 @layer base 块进行定义；现在它们被拆分为两个独立的块：

默认颜色现在位于 @theme 块中
深色模式的颜色现在位于 @layer theme 块中

下面是将 sky 设为应用强调色的示例：

@theme {    --color-accent: var(--color-sky-600);    --color-accent-content: var(--color-sky-600);    --color-accent-foreground: var(--color-white);}@layer theme {    .dark {        --color-accent: var(--color-sky-600);        --color-accent-content: var(--color-sky-400);        --color-accent-foreground: var(--color-white);    }}

如果你仍在使用旧版的 Tailwind 配置，现在可以删除以下几行：

export default {    ...    theme: {        extend: {            colors: {                ...--             accent: {--                  DEFAULT: 'var(--color-accent)',--                  content: 'var(--color-accent-content)',--                  foreground: 'var(--color-accent-foreground)',--              },            },        },    },};

重新指定灰色

如果你此前在 tailwind.config.js 中重新指定了 Flux 的首选灰色，那么现在需要把它迁移到 app.css 文件中。

下面是将 zinc 重新指定为 neutral 的示例：

/* Re-assign Flux's gray of choice... */@theme {  --color-zinc-50: var(--color-neutral-50);  --color-zinc-100: var(--color-neutral-100);  --color-zinc-200: var(--color-neutral-200);  --color-zinc-300: var(--color-neutral-300);  --color-zinc-400: var(--color-neutral-400);  --color-zinc-500: var(--color-neutral-500);  --color-zinc-600: var(--color-neutral-600);  --color-zinc-700: var(--color-neutral-700);  --color-zinc-800: var(--color-neutral-800);  --color-zinc-900: var(--color-neutral-900);  --color-zinc-950: var(--color-neutral-950);}

如果你的应用仍在使用 tailwind.config.js 文件，那么可以删除以下内容：

-- import colors from 'tailwindcss/colors';export default {    ...    theme: {        extend: {            colors: {--              // Re-assign Flux's gray of choice...--              zinc: colors.neutral,                ...            },        },    },};

深色模式变更

如果你此前在 tailwind.config.js 中设置了 darkMode: null 以阻止 Flux 控制 .dark 类并自动处理深色模式，现在可以通过不在布局文件中包含 @fluxAppearance 指令来达到同样的效果：

<head>    ...--    @fluxAppearance</head>

重命名组件

在 Flux v2 中，部分组件被重命名。你需要相应地更新你的代码：

v1	v2
flux:options	flux:select.options
flux:option	flux:select.option
flux:cell	flux:table.cell
flux:columns	flux:table.columns
flux:column	flux:table.column
flux:rows	flux:table.rows
flux:row	flux:table.row