我正在尝试使用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>@endsectioncss 被解析但仍应用于整个页面。我仍然需要它只应用于表单部分。
2 回答
紫衣仙女
TA贡献1839条经验 获得超15个赞
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
TA贡献1813条经验 获得超2个赞
首先，按视图导入或加载 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>
@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';
}
- 2 回答
- 0 关注
- 294 浏览
添加回答
举报
0/150
提交
取消