Laravel stylesheets and javascript don't load for non-base routes

Question

Okay--I know this is a really elementary issue, but I can't figure it out. This is a question regarding Laravel.

Basically, I have my stylesheets embedded in my default layout view. I'm currently just using regular css to link them, such as:

<link rel="stylesheet" href="css/app.css" />

It works great when I am at a single level route such as /about, but stops working when I go deeper, such as /about/me.

If I look at Chrome's developer console I see some of the following errors (only for the deeper routes):

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

So clearly it is now looking for the css inside the "about" folder--which of course isn't a folder at all.

I just want it to look in the same place for the assets regardless of the route.

Misconduct

Does this answer your question? Using CSS in Laravel views? – Latea

Answer 1

For Laravel 4 & 5:

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

URL::asset will link to your project/public/ folder, so chuck your scripts in there.

---

^{Note: For this, you need to use the "Blade templating engine". Blade files use the .blade.php extension.}

Mopes

Just confirming it works in Laravel 5 and 5.1 as well. Thank you. – Reactor

I have create my own package. can I have css inside it? if so, how can I include css from my own package? – Merc

You can also use the asset() helper method instant of URL::asset(). It does the same work. – Hawkshaw

Works in Laravel 5.4 as well. – Stoffel

What if you want the minified version on production but not in development? – Uracil

Been using it for a while now. Also works for Laravel 5.6 too – Effulgence

One can also view this solution on a running container for debugging here – Nabonidus

Works on Laravel 6 too – Cumbrous

Answer 2

Laravel 4

The better and correct way to do this

Adding CSS

HTML::style will link to your project/public/ folder

{{ HTML::style('css/bootstrap.css') }}

Adding JS

HTML::script will link to your project/public/ folder

{{ HTML::script('js/script.js') }}

Unorganized

Answer 3

You are using relative paths for your assets, change to an absolute path and everything will work (add a slash before "css".

<link rel="stylesheet" href="/css/app.css" />

Head

This will not work if your app is located in a subdirectory of the site. Then you run into the issue where you are looking too far back for your assets. My recommendation is to use the solution @Chris provided. This eliminates ALL guesswork, and allows you to move your app anywhere, and still ensure that it will load assets correctly. – Amritsar

Answer 4

in Laravel 5,
there are 2 ways to load a js file in your view
first is using html helper, second is using asset helpers.
to use html helper you have to first install this package via commandline:

composer require illuminate/html

then you need to reqister it, so go to config/app.php, and add this line to the providers array

'Illuminate\Html\HtmlServiceProvider'

then you have to define aliases for your html package so go to aliases array in config/app.php and add this

'Html'     => 'Illuminate\Html\HtmlFacade'

now your html helper is installed so in your blade view files you can write this:

{!! Html::script('js/test.js') !!}

this will look for your test.js file in your project_root/public/js/test.js.
//////////////////////////////////////////////////////////////
to use asset helpers instead of html helper, you have to write sth like this in your view files:

<script src="{{ URL::asset('test.js') }}"></script>

this will look for test.js file in project_root/resources/assets/test.js

Marmot

illuminate/html has been abandoned. User laravelcollective/html instead. – Uracil

You can also use <script src="{{ url(asset('test.js')) }}"></script> (or <script src="{{ url(mix('test.js')) }}"></script> if you're using Laravel Mix). – Sepia

Answer 5

If you're using Laravel 3 and your CSS/JS files inside public folder like this

public/css
public/js

then you can call them using in Blade templates like this

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}

Bolide

Answer 6

i suggest you put it on route filter before on {project}/application/routes.php

Route::filter('before', function()
{
    // Do stuff before every request to your application...    
    Asset::add('jquery', 'js/jquery-2.0.0.min.js');
    Asset::add('style', 'template/style.css');
    Asset::add('style2', 'css/style.css');

});

and using blade template engine

{{ Asset::styles() }}
{{ Asset::scripts(); }}

or more on laravel managing assets docs

Chitarrone

yes, this new laravel makes everything complicated, assets, even profiler are not on documentation anymore.. – Chitarrone

Answer 7

in laravel 4 you just have to paste {{ URL::asset('/') }} this way:

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

It is the same for:

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">

Aurthur

Answer 8

Laravel 5.4 with mix helper:

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"> </script>

Berube

Answer 9

In Laravel 5.7, put your CSS or JS file into Public directory.

For CSS:

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

For JS:

<script type="text/javascript" src="{{ asset('bootstrap.js') }}"></script>

Lowpitched

Answer 10

Best way in my opinion add BASE tag in your HTML

<base href="/" target="_top">

So it's not necessary to use things like

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

just type

<script src="js/jquery/jquery-1.11.1.min.js"></script>

in your view and it will works.

This mehod will deal with RESTful URLs and static resources as images, css, scripts.

Arid

Answer 11

Vinsa almost had it right you should add

<base href="{{URL::asset('/')}}" target="_top">

and scripts should go in their regular path

<script src="js/jquery/jquery-1.11.1.min.js"></script>

the reason for this is because Images and other things with relative path like image source or ajax requests won't work correctly without the base path attached.

Inverson

Answer 12

If you do hard code it, you should probably use the full path (href="http://example.com/public/css/app.css"). However, this means you'll have to manually adjust the URLs for development and production.

An Alternative to the above solutions would be to use <link rel="stylesheet" href="URL::to_asset('css/app.css')" /> in Laravel 3 or <link rel="stylesheet" href="URL::asset('css/app.css')" /> in Laravel 4. This will allow you to write your HTML the way you want it, but also let Laravel generate the proper path for you in any environment.

Karmakarmadharaya

Answer 13

Better way to use like,

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

Cadenza

Answer 14

Suppose you have not renamed your public folder. Your css and js files are in css and js subfolders in public folder. Now your header will be :

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>

Ewing

Answer 15

Just Add Another Issue:

If you want to remove /public from your project using .htaccess,

then you can use this, [Add public before /css inside asset()]

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

[Sometimes, it is useful.]

Sarto

Answer 16

The better and correct way to do this:

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

Sipple

Answer 17

For Laravel 4: {!! for a double curly brace { {
and for Laravel 5 & above version: you may replace {!! by {{ and !!} by }} in higher-end version

If you have placed JavaScript in a custom defined directory.
For instance, if your jQuery-2.2.0.min.js is placed under the directory resources/views/admin/plugins/js/ then from the *.blade.php you will be able to add at the end of the section as

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

Since Higher-End version supports Lower-End version also and but not vice-versa

Cropper

Answer 18

In Laravel 5.8

<script src="{{asset('js/customPath1/customPath2/customjavascript.js')}}"></script>

just made the trick for me.

Bog

Answer 19

put your script file in public directory then use(for example for userFunctions.js)

<script type="text/javascript" src="{{asset('js/userFunctions.js')}}">

Puff

Answer 20

For laravel 5 +

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

Where the asset() function in Laravel generates URLs for assets, aiding in clean, versioned, and secure inclusion of stylesheets, scripts, and images.

Wound