英文:
@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'````javascriptimport { 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论