使用Laravel引导CSS设置页面的一部分样式 [英] Using Laravel bootstrap css to style only a section of a page
问题描述
我正在尝试使用Laravel附带的默认引导CSS( app.css )来设置页面的样式，特别是注册页面的form部分.
I'm trying to use the default bootstrap css (app.css) that ships with Laravel to style a section of my page - specifically, the form section of my registration page.
我不想在我的html标头中包含 app.css ，因为它给页面的其他部分带来了不良影响.因此，我希望它仅对页面中的html表单进行样式设置.
I don't want to include app.css in my html header as it gives me undesired effect on other parts of the page. So I want it to style only my html forms within the page.
当前，我在表单部分使用了这样的 asset()或 HTML :: style()方法:
Currently, I've used either the asset() or HTML::style() methods like this within my form section:
@section('form')
<style> @import "{{ asset('css/app.css') }}"; </style>
<form>...</form>
@endsection
OR
@section('form')
{{ HTML::style('css/app.css') }}
<form>...</form>
@endsection
这两种方法都可以正确加载样式，但是会影响整个页面，而不仅是表单元素.
Both method loads the style correctly, but affects the entire page instead of only the form elements.
我尝试使用 ViewComposer 类来解决此问题，方法是将ViewComposer中的变量设置为所需的样式-仅当我请求所需的视图时才返回该变量:
I tried using the ViewComposer class to solve this problem by setting a variable in ViewComposer to my desired style - returning it only when I request the required view:
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 子视图时，我会得到如下样式变量:
However, when I render the sections.register sub-view, I get the style variable like this:
@section('form')
{{ $style ?? '' }}
<form>...</form>
@endsection
浏览器上的输出未解析为CSS，而是显示为:
the output on the browser is not parsed as css but displayed as-is:
<style> @import "{{ asset('css/app.css') }}"; </style>
那么，有没有办法我可以仅解析html页面中给定视图部分的外部CSS，并且可以使用ViewComposer类来实现?
So, is there a way I can parse external css for only a given view section within the html page and can it be achieved using the ViewComposer class?
更新:我正在尝试一些事情，并使用了它:
UPDATE: I was trying a few things and used this:
@section('form')
{!! $style ?? '' !!}
<form>...</form>
@endsection
css已解析，但仍应用于整个页面.我仍然需要将其仅应用于表单部分.
The css is parsed but still applied to the entire page. I still need it applied to only the form section.
推荐答案
首先，按视图导入或加载CSS对应用程序的性能不利.因此，不建议使用View Composer加载CSS.我从 DenisĆerić的答案中获得了线索，尽管目前尚不清楚乍一看.
First of all, importing or loading css per-view will be bad for the performance of the application. So, using View Composer to load in css is not advisable. I took a cue from Denis Ćerić's answer, though it wasn't clear at first glance.
此外，在这篇文章使事情变得更清晰了.
Also, the accepted answer on this post made things a little clearer.
实现此目标的正确方法是使用CSS预处理器.流行的是 less 和 sass .我使用了 sass ，因为Laravel目前采用了它.
The right way to achieve this is to use a css preprocessor. Popular ones are less and sass. I used sass because it is currently adopted by Laravel.
我按照此处的说明在Windows计算机上安装了 sass .
I installed sass on my windows machine following the instructions here.
在与 app.css 相同的文件夹中创建一个新的 scss 文件: app-custom.scss .
Create a new scss file: app-custom.scss in the same folder as app.css.
使用嵌套导入修改 app-custom.scss :
.app-form
{
@import 'app';
}
在Windows命令行上使用sass命令生成 app-custom.css :
Generate app-custom.css using the sass command on Windows command line:
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 文件中包括每个部分的类，如下所示:
HINT: if you want to use the style in app.css for multiple separate sections of your page, you can still achieve this from a single scss file. Just include the classes of each section in your scss file like this:
.section-1, .section-2, .section-3
{
@import 'app';
}
这篇关于使用Laravel引导CSS设置页面的一部分样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
