在 Laravel 8 中使用堆栈

Question

我正在使用 Laravel 8 和 Jetstream 构建一个站点。 Jetstream 对 javascript / css 框架有自己的看法，这很棒，但我需要向我的组件之一添加外部 javascript 库，但我没有看到任何地方将它们添加到默认 app 布局中。所以我在默认应用程序布局中为 css /js 添加了一个堆栈：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        // head stuff
        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        @livewireStyles
        @stack('css') // added this stack

        <!-- Scripts -->
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        // body stuff
    </body>
    @stack('scripts') // and this stack
</html>

然后在我扩展应用程序布局的子视图中，我尝试将 js 文件推送到 js 堆栈：

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Stuff & Things') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
                <x-component.stuffnthings />
            </div>
        </div>
    </div>
</x-app-layout>
@push('scripts')
    <script src={{public_path("js/mobiscroll.javascript.min.js")}}></script>
@endpush

当我查看源代码时，js 文件不在子视图中。我错过了什么？这是将自定义 js / css 添加到 Jetstream 的正确方法还是有更好的方法？

Answer 1

对于任何用头撞类似墙的人——我的代码的问题是 push 需要在布局标签内。一旦我向上移动它，它就起作用了（我一直在使用 public_path 错误）：

<x-app-layout>
<x-slot name="header">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Stuff & Things') }}
    </h2>
</x-slot>

<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <x-component.stuffnthings />
        </div>
    </div>
</div>
@push('scripts')
    <script src={{"js/mobiscroll.javascript.min.js"}}></script>
@endpush
</x-app-layout>

如果有更好的方法来完成此操作，我会保持打开状态！

在 Laravel 8 中使用堆栈

Using stacks in Laravel 8

javascript

php

laravel

laravel-8

jetstream