InertiaJS-Vue-Laravel:利用CSS文件

反思你的问题

<link rel="stylesheet" href="../css/app.css">

这里的问题是你写的链接 href 开始在中查找CSS文件 public 文件夹而不是 resources 文件夹如果你不想用Vite编译CSS,只想写一个普通的CSS文件,只需将其放在 public/css/app.css 。然而,这是一个相当基本的方法。 您可以通过编译生成更好的代码,所以我建议使用以下解决方案之一。

• public directory -Laravel文档

解决方案#1

我想您还想编译 app.css 产品版本的文件。在这种情况下,您可以使用 @vite 加载的刀片指令 app.css 也

@vite(['resources/css/app.css', 'resources/js/app.js'])

此外,在 vite.config.js 文件,则需要添加app.css进行编译。

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

• Configuring Vite for Laravel -Laravel文档
• How to Load Scripts and Styles with Vite -劳拉

解决方案#2(更适合Inertia和其他SPA解决方案)

在Inertia的Laravel文档中,另一种建议的方法是简单地导入 app.css 进入 app.js 文件。

@vite('resources/js/app.js')

让我们导入 app.css 进入 app.js 文件

import '../css/app.css'; 

• Configuring Vite for Laravel (from the second code block) -Laravel文档