'Including a css file in a blade template?

I want to include a css file in my Laravel blade template.

I've tried:

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

But it says view does not exist. It does exist.

How can I include a css file?

Please note, I know this is not the correct way to link css files, but for my use case it is (I'm not building a website).

laravellaravel-5laravel-5.4


Solution 1:[1]

@include directive allows you to include a Blade view from within another view, like this :

@include('another.view')

Include CSS or JS from master layout

asset()

The asset function generates a URL for an asset using the current scheme of the request (HTTP or HTTPS):

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

mix()

If you are using versioned Mix file, you can also use mix() function. It will returns the path to a versioned Mix file:

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

Incude CSS or JS from sub-view, use @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

Solution 2:[2]

if your css file in public/css use :

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

if your css file in another folder in public use :

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

Solution 3:[3]

As you said, this is a terrible way to do so Laravel doesn't have that functionality, AFAIK.

However blade can run plain php so you can do like this if you really need to:

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

Solution 4:[4]

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

It will search for the file in your project public folder

Solution 5:[5]

in your main layout put this in the head at the bottom of everything

@stack('styles')

and in your view put this

@push('styles')

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

@endpush

basically a placeholder so the links will appear on your main layout, and you can see custom css files on different pages

Solution 6:[6]

You should try this :

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

OR

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

Hope this help for you !!!

Solution 7:[7]

just put your CSS file into resources/css then you need to compile it with mix and your CSS file will be in public/css use:

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

to refer to it ... i recommend this video

Solution 8:[8]

include the css file into your blade template in laravel

  1. move css file into public->css folder in your laravel project.
  2. use <link rel="stylesheet" href="{{ asset('css/filename') }}">

so css is applied in a blade.php file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 u2tope
Solution 3
Solution 4 gbalduzzi
Solution 5 Jackal
Solution 6 AddWeb Solution Pvt Ltd
Solution 7 Mahdi Zarei
Solution 8 Wahyu Kristianto

Related Questions