如何在Laravel匿名组件中编写组件专属CSS？

你可以通过「Blade栈（Stack）+ @once指令」的组合来实现，这是Laravel原生支持的方案，具体步骤如下：

1. 配置布局文件 #

在你的主布局文件（比如resources/views/layouts/app.blade.php）的<head>标签内添加@stack('styles')，用来收集所有组件推送的样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>你的应用</title>
    <!-- 其他全局样式/资源 -->
    @stack('styles')
</head>
<body>
    @yield('content')
</body>
</html>

2. 编写组件专属样式 #

在组件文件（比如resources/views/components/base-button.blade.php）中，用@push('styles')把样式推送到布局的栈里，同时用@once避免组件重复渲染时样式重复注入：

<button class="btn">
    {{ $slot }}
</button>

@push('styles')
@once
<style>
.btn {
    padding: 8px 16px;
    background-color: #2563eb;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.btn:hover {
    background-color: #1d4ed8;
}
</style>
@endonce
@endpush

3. 使用组件 #

在页面中正常引用组件即可，样式会自动被注入到布局的<head>中：

@extends('layouts.app')

@section('content')
    <x-base-button>点击按钮</x-base-button>
    <!-- 多次使用组件也只会注入一次样式 -->
    <x-base-button>另一个按钮</x-base-button>
@endsection

为什么之前的方法失效？ #

• 直接在组件里写<style>会被Blade的HTML清理机制移除，因为Blade组件默认只渲染组件的HTML内容，不会保留顶级的<style>标签。
• 使用@section的话，多个组件的@section('style')会互相覆盖，最终只会渲染最后一个组件的样式，灵活性不足。

内容的提问来源于stack exchange，提问作者Lauren