Including a css file in a blade template?

31
votes

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).

8
laravellaravel-5laravel-5.4
Is it problem to you if you write css styles in file.blade.php? - Mohammad b
Yes it needs to be a standard .css file. - panthro
@include is only for views, not stylesheets. I'm not sure that the Laravel blade engine has what you need. You could create a view with a link to your stylesheet and include that view, but I doubt that is what you really want - Daniel
Daniel - okay how would one include a non blade file then? - panthro
Have you tried {{ URL::asset('css/styles.css') }} - Daniel

8 Answers

75
votes

@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
28
votes

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') }}" >
5
votes

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') ?>
1
votes
<link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">

It will search for the file in your project public folder

1
votes

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

0
votes

You should try this :

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

OR

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

Hope this help for you !!!

-2
votes

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.

-3
votes

Work with this code :

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