40

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
  • Is it problem to you if you write css styles in file.blade.php? Commented Jul 24, 2017 at 11:42
  • Yes it needs to be a standard .css file.
    – panthro
    Commented Jul 24, 2017 at 11:43
  • @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
    Commented Jul 24, 2017 at 11:43
  • Daniel - okay how would one include a non blade file then?
    – panthro
    Commented Jul 24, 2017 at 11:43
  • 1
    Have you tried {{ URL::asset('css/styles.css') }}
    – Daniel
    Commented Jul 24, 2017 at 11:45

12 Answers 12

98

@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
35

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') }}" >
0
9

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
  • I wanted to include the full local path so the content would be available within an email and not via a url so this was the only one that worked for me. Commented Feb 21, 2018 at 14:39
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

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

It will search for the file in your project public folder

3

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

2

Most of the answers does not include the building of the css file. Adding the following to the HTML.

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

And adding the file /resources/css/app.css to the project.

Assuming it is a fresh project, running the following commands does the trick. Off course using run prod for the deployment build.

npm install
npm run dev
2

For newer versions of Laravel (that use Vite)

<head>
  ...
  @vite("resources/css/app.css")
  ...
</head>
1

I use this. Inside your blade

    <style> {{ file_get_contents(public_path('css/app.css')) }} </style>
0

You should try this :

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

OR

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

Hope this help for you !!!

-2

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.

1
  • <link rel="stylesheet" href="{{ asset('assets/css/main.css') }}">
    – user3832429
    Commented Nov 5, 2021 at 9:54
-3

Work with this code :

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.