使用外部CSS通过Laravel View Composer为页面的一部分设置样式

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.

2个回答

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.

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.

I installed sass on my windows machine following the instructions here.

Create a new scss file: app-custom.scss in the same folder as app.css.

Modify app-custom.scss using nested imports:

.app-form
{
    @import 'app';
}

Generate app-custom.css using the sass command on Windows command line:

sass app-custom.scss app-custom.css

Change the class of your form to app-form:

@section('form')
<form class='app-form'>...</form>
@endsection

Include app-custom.css in your header using link tag:

<head>
    <link href="{{ asset('css/app-custom.css') }}" rel="stylesheet">
</head>

and you are done.

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';
}

1. One option is to copy only the css you need and paste it into custom css and make a different layout for that view. But that can be tedious work as you said.

2. Another option is to prefix you app.css file. There is a software that can do that here is the tutorial. So if you prefix whole css file with for example: .laravel-app then you can wrap anything that you would like to be styled by app.css like this:

<div class="laravel-app">
<!-- Everything in here will be styled by app.css -->
</div>

This will help you in the long run with your project.

duanganleng0577
duanganleng0577 谢谢丹尼斯,虽然你的回答不是直截了当,但它给了我一个正确答案的线索
一年多之前 回复
douli8428
douli8428 我明白了,请查看我更新的答案。 我希望它有所帮助。
一年多之前 回复
douhuitan5863
douhuitan5863 谢谢@Denis Ceric。 是的,这是我暂时采用的方法。 虽然我不得不使用Visual Studio代码编辑器将所需的样式放入另一个样式表中。 但这真的很乏味。 我下次会试用Chrome插件。 但如果我得到一个正确的答案,那将是非常好的,所以我不会一直做这种剪切和粘贴。
一年多之前 回复
duanaoshu1989
duanaoshu1989 我真的很抱歉我误解了你想要实现的目标。 也许另一个选择是从app.css获取css仅用于表单(可能更容易使用CSS使用chrome插件)并为该视图使用不同的布局?
一年多之前 回复
dongshai8330
dongshai8330 我明白这是做什么的。 但这与我想要达到的目标相反。 在这里,您要阻止标记中的本地元素继承页面的全局css。 我想要的是在本地应用外部css,以便只有一个本地元素受到影响,并且它不会全局应用。 我知道我可以使用嵌入式样式标签和内联css来实现这一点。 但我希望使用外部CSS样式表完成此操作。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐