英文:
@vite( 'resources/css/app.css' 'resources/js/app.js' ) is not working with laravel 9, vite 4.0.0
问题
在Laravel 9应用程序中，我使用以下命令安装了Laravel auth（带有Jetstream Livewire和vite-4.0.0）：
composer require laravel/jetstream
php artisan jetstream:install livewire
php artisan migrate
npm install
npm run dev
npm run build
在我的app.blade.php和guest.blade.php中，@vite('resources/css/app.css' 'resources/js/app.js') 不起作用。CSS和JS没有加载。
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Styles -->
@livewireStyles
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
@livewireScripts
</body>
</html>
我已尝试此问题的解决方案，但没有效果。
英文:
In Laravel 9 app, I installed Laravel auth (with Jetstreem livewire & vite-4.0.0) using the following commands:
composer require laravel/jetstream
php artisan jetstream:install livewire
php artisan migrate
npm install
npm run dev
npm run build
In my app.blade.php and guest.blade.php @vite( 'resources/css/app.css' 'resources/js/app.js' ) is not working. CSS & JS is not loading.
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
<!-- Styles -->
@livewireStyles
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
@livewireScripts
</body>
</html>
I have tried the solutions of This Question but nothing worked.
答案1
得分: 0
你是否也将它们添加到了 vite.config.js 中，并设置了相应的路径？
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig(
{
plugins: [
laravel({
input: [
'resources/admin/scss/style.scss',
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
英文:
Did you added them too into vite.config.js with corresponding path
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig(
{
plugins: [
laravel({
input: [
'resources/admin/scss/style.scss',
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
</details>
# 答案2
**得分**: 0
以下是翻译好的部分：
问题出在 **app.css** 上。 Vite 配置在没有 CSS 的情况下运行得很好。
这是解决方案：
1. **vite.config.js**
---------------------
从 **vite.config.js** 中移除 `'resources/js/app.css'`
```javascript
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
- 在 resources/js/app.js 中添加 CSS
import '../css/app.css';
像这样：
import './bootstrap'
import '../css/app.css';
import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
window.Alpine = Alpine;
Alpine.plugin(focus);
Alpine.start();
- 在视图中使用 @vite
因为我们的 CSS 已经被导入到我们的 app.js 中，所以我们只需要在我们的布局视图文件 app.blade.php 和 guest.blade.php 中使用
@vite('resources/js/app.js')
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Styles -->
@livewireStyles
@vite('resources/js/app.js')
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
</body>
</html>
- 构建您的应用程序
运行 npm run build
注意：
如果需要，使用 php optimize:clear 进行缓存清理。
英文:
The problem is with app.css. Vite config works great without CSS.
Here's the solution:
- vite.config.js
Remove 'resources/js/app.css' from vite.config.js
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
- Add CSS to resources/js/app.js
`import '../css/app.css';`
Like
import './bootstrap';
import '../css/app.css';
import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
window.Alpine = Alpine;
Alpine.plugin(focus);
Alpine.start();
- Using @vite in views
Because our CSS is already imported into our app.js, we will only use
@vite('resources/js/app.js')
in our layout view files: app.blade.php and guest.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Styles -->
@livewireStyles
@vite('resources/js/app.js')
</head>
<body>
<div class="font-sans text-gray-900 antialiased">
{{ $slot }}
</div>
</body>
</html>
- Build your app
npm run build
Note:
Use php optimize:clear for cache cleaning, if needed.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论