我不想在每个组件中保留特定于组件的样式(如 Vue SFC)。它看起来像这样:
<!-- base-button.blade.php -->
<button class="btn">
{{ $slot }}
</button>
<style>
.btn { /* Some styles */ }
</style>
有办法做到这一点吗?如果我粘贴上面的代码,该
style
标签将从渲染的 HTML 中删除。
{{-- layout.blade.php --}}
@hasSection('style')
@yield('style')
@endif
{{-- base-button.blade.php --}}
@section('style')
<style>
.btn {
/* Some styles */
}
</style>
@endsection
{{-- layout.blade.php --}}
@stack('styles')
{{-- base-button.blade.php --}}
@push('styles')
<style>
.btn {
/* Some styles */
}
</style>
@endpush
但是它们都没有渲染任何
style
标签。
使用 @push 指令将样式推送到名为“styles”的堆栈中。
<!-- components/base-button.blade.php -->
<button class="btn">
{{ $slot }}
</button>
@push('styles')
<style>
.btn {
/* Some styles */
}
</style>
@endpush
使用@stack指令渲染推送的样式。
<!DOCTYPE html>
<html>
<head>
<title>Laravel</title>
@stack('styles')
</head>
<body>
<!-- Your content here -->
</body>
</html>