我正在尝试使用Laravel附带的默认引导css(app.css)来设置我页面的一部分 - 特别是我的注册页面的表单部分。
我不想在我的 html 标题中包含app.css，因为它会给我页面的其他部分带来不希望的效果。所以我希望它只设置页面内我的 html 表单的样式。
目前，我已经在我的表单部分中使用了这样的asset()或HTML::style()方法：
@section('form')
<style> @import "{{ asset('css/app.css') }}"; </style>
<form>...</form>
@endsection
或
@section('form')
{{ HTML::style('css/app.css') }}
<form>...</form>
@endsection
这两种方法都可以正确加载样式，但会影响整个页面，而不仅仅是表单元素。
我尝试使用ViewComposer类来解决此问题，方法是将 ViewComposer 中的变量设置为我想要的样式 - 仅在我请求所需视图时才返回它：
class ViewComposer
{
public function compose(View $view)
{
$data = [];
switch($view->getName())
{
...
case 'sections.register':
$this->data = ['style'=>"<style> @import "". asset('css/app.css') . ""; </style>"];
break;
}
return $view->with($this->data);
}
}
但是，当我呈现sections.register子视图时，我得到的样式变量如下所示：
@section('form')
{{ $style ?? '' }}
<form>...</form>
@endsection
浏览器上的输出不会解析为 CSS，而是按原样显示：
<style> @import "{{ asset('css/app.css') }}"; </style>
那么，有没有办法我可以只解析 html 页面中给定视图部分的外部 css，并且可以使用 ViewComposer 类来实现吗？
更新：我正在尝试一些事情并使用了这个：
@section('form')
{!! $style ?? '' !!}
<form>...</form>
@endsection
css 被解析，但仍应用于整个页面。我仍然需要将其仅应用于表单部分。
1.一种选择是仅复制您需要的 css 并将其粘贴到自定义 css 中，并为该视图制作不同的布局。但正如你所说，这可能是繁琐的工作。
2.另一种选择是为您的应用程序.css文件添加前缀。这里有一个软件可以做到这一点，这里是教程。因此，如果您在整个 css 文件的前面加上例如：.laravel-app，那么您可以包装您希望通过 app 设置样式的任何内容.css如下所示：
<div class="laravel-app">
<!-- Everything in here will be styled by app.css -->
</div>
从长远来看，这将有助于您的项目。
首先，导入或加载每个视图的 css 会对应用程序的性能不利。因此，不建议使用 View Composer 在 css 中加载。我从丹尼斯·切里奇的回答中得到了启发，尽管乍一看并不清楚。
此外，这篇文章中接受的答案使事情变得更加清晰。
实现此目的的正确方法是使用 css 预处理器。流行的是less和sass.我使用sass因为它目前被Laravel采用。
我按照此处的说明在我的 Windows 机器上安装了sass。
创建一个新的scss文件：app-custom.scss与app.css位于同一文件夹中。
使用嵌套导入修改app-custom.scss：
.app-form
{
@import 'app';
}
在 Windows 命令行上使用 sass 命令生成app-custom.css：
sass app-custom.scss app-custom.css
将窗体的类更改为app-form：
@section('form')
<form class='app-form'>...</form>
@endsection
使用链接标记在标头中包含app-custom.css：
<head>
<link href="{{ asset('css/app-custom.css') }}" rel="stylesheet">
</head>
你完成了。
提示：如果您想将app.css中的样式用于页面的多个单独部分，您仍然可以从单个scss文件中实现此目的。只需在scss文件中包含每个部分的类，如下所示：
.section-1, .section-2, .section-3
{
@import 'app';
}