如何在匿名 Laravel 组件中编写 CSS?

问题描述 投票:0回答:1

我不想在每个组件中保留特定于组件的样式(如 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
标签。

php laravel laravel-blade
1个回答
1
投票

使用 @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>
© www.soinside.com 2019 - 2024. All rights reserved.