在刀片模板中包含 css 文件？答案

【问题标题】：Including a css file in a blade template?在刀片模板中包含 css 文件？
【发布时间】：2022-01-31 22:33:32
【问题描述】：

我想在我的 Laravel 刀片模板中包含一个 css 文件。

我试过了：

@include(public_path('css/styles.css'))

但它说视图不存在。它确实存在。

如何包含 css 文件？

请注意，我知道这不是链接 css 文件的正确方法，但对于我的用例来说是这样（我不是在建立网站）。

【问题讨论】：

你在file.blade.php里写css样式有问题吗？
是的，它需要是一个标准的 .css 文件。
@include 仅适用于视图，不适用于样式表。我不确定 Laravel 刀片引擎是否满足您的需求。您可以创建一个带有指向样式表的链接的视图并包含该视图，但我怀疑这是您真正想要的
Daniel - 那么如何包含非刀片文件？
你试过{{ URL::asset('css/styles.css') }}

标签： laravel laravel-5 laravel-5.4

【解决方案1】：

@include 指令允许您在另一个视图中包含 Blade 视图，如下所示：

@include('another.view')

在主布局中包含 CSS 或 JS

`asset()`

asset 函数使用请求的当前方案（HTTP 或 HTTPS）为资产生成 URL：

<link href="{{ asset('css/styles.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ asset('js/scripts.js') }}"></script>

`mix()`

如果您使用版本化的Mix 文件，您也可以使用mix() 函数。它将返回版本控制的 Mix 文件的路径：

<link href="{{ mix('css/styles.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ mix('js/scripts.js') }}"></script>

在子视图中包含 CSS 或 JS，使用`@push()`。

layout.blade.php

<html>
    <head>
        <!-- push target to head -->
        @stack('styles')
        @stack('scripts')
    </head>
    <body>

        <!-- or push target to footer -->
        @stack('scripts')
    </body>
</html

view.blade.php

@push('styles')
    <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script type="text/javascript" src="{{ asset('js/scripts.js') }}"></script>
@endpush

【讨论】：

【解决方案2】：

如果你的 css 文件在 public/css 使用：

<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}" >

如果您的 css 文件在另一个公共文件夹中使用：

 <link rel="stylesheet" type="text/css" href="{{ asset('path/css/style.css') }}" >

【讨论】：

【解决方案3】：

正如你所说，这是一种糟糕的方式，因此 Laravel 没有该功能，AFAIK。

但是刀片可以运行普通的 php，所以如果你真的需要，你可以这样做：

<?php include public_path('css/styles.css') ?>

【讨论】：

我想包含完整的本地路径，这样内容就可以在电子邮件中而不是通过 url 获得，所以这是唯一对我有用的。

【解决方案4】：

<link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">

它将在您的项目public文件夹中搜索文件

【讨论】：

【解决方案5】：

在您的主布局中，将其放在所有内容的底部

@stack('styles')

在你看来把这个

@push('styles')

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

@endpush

基本上是一个占位符，因此链接将出现在您的主布局中，并且您可以在不同的页面上看到自定义 css 文件

【讨论】：

【解决方案6】：

你应该试试这个：

{{ Html::style('css/styles.css') }}

或

<link href="{{ asset('css/styles.css') }}" rel="stylesheet">

希望对你有帮助！！！

【讨论】：

【解决方案7】：

只需将你的 CSS 文件放入 resources/css 然后你需要用 mix 编译它您的 CSS 文件将位于 public/css 使用：

<link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}" >

参考它... 我推荐this video

【讨论】：

【解决方案8】：

将 css 文件包含到 laravel 中的刀片模板中

将 css 文件移动到您的 laravel 项目中的 public->css 文件夹中。
使用<link rel="stylesheet" href="{{ asset('css/filename') }}">

所以 css 被应用在一个 Blade.php 文件中。

【讨论】：

【解决方案9】：

使用此代码：

{!! include ('css/app.css') !!}

【讨论】：

在主布局中包含 CSS 或 JS

asset()

mix()

在子视图中包含 CSS 或 JS，使用@push()。

将 css 文件包含到 laravel 中的刀片模板中

`asset()`

`mix()`

在子视图中包含 CSS 或 JS，使用`@push()`。