I'm trying to use external css to style a section of my page - specifically, the form section of my registration page. I'm using the default app.css that ships with Laravel.
However, 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.
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.
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);
}
}
However, when I render the sections.register sub-view, I get the style variable like this:
@section('form')
{{ $style ?? '' }}
<form>...</form>
@endsection
the output on the browser is not parsed as css but displayed as-is:
<style> @import "{{ asset('css/app.css') }}"; </style>
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
The css is parsed but still applied to the entire page. I still need it applied to only the form section.
