使用 Laravel bootstrap css 只设置页面的一部分
我正在尝试使用app.cssLaravel 附带的默认引导 css ( ) 来设计我页面的一部分 - 特别是我的注册页面的表单部分。
我不想包含app.css在我的 html 标题中，因为它对页面的其他部分产生了不良影响。所以我希望它只在页面中设置我的 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 被解析但仍应用于整个页面。我仍然需要它只应用于表单部分。
慕田峪73311742回答
-
紫衣仙女
1.一种选择是仅复制您需要的 css 并将其粘贴到自定义 css 中，然后为该视图制作不同的布局。但正如你所说，这可能是一项乏味的工作。2.另一种选择是为您的 app.css 文件添加前缀。有一个软件可以做到这一点，这里是教程。因此，如果您为整个 css 文件添加前缀，例如：.laravel-app那么您可以像这样包装任何您希望由 app.css 设置样式的内容：<div class="laravel-app"> <!-- Everything in here will be styled by app.css --> </div>从长远来看，这将对您的项目有所帮助。 -
慕姐8265434
首先，按视图导入或加载 css 会对应用程序的性能产生不利影响。因此，不建议使用 View Composer 加载 css。我从Denis Ćerić的回答中得到了提示，尽管乍一看并不清楚。此外，这篇文章中接受的答案使事情变得更加清晰。实现这一目标的正确方法是使用 css 预处理器。流行的是less和sass。我使用sass它是因为它目前被 Laravel 采用。我sass按照此处的说明安装在我的 Windows 机器上。创建一个新scss文件：app-custom.scss在与app.css.app-custom.scss使用嵌套导入进行修改：.app-form{ @import 'app';}app-custom.css在 Windows 命令行上使用 sass 命令生成：sass app-custom.scss app-custom.css将表单的类更改为app-form：@section('form')<form class='app-form'>...</form>@endsectionapp-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';}
随时随地看视频慕课网APP
PHP