How to include External CSS and JS file in Laravel 5

Question

I am Using Laravel 5.0 , the Form and Html Helper are removed from this version , i dont know how to include external css and js files in my header file. Currently i am using this code.

<link rel="stylesheet" href="/css/bootstrap.min.css"> <!---  css file  --->
<script type="text/javascript" src="/js/jquery.min.js"></script>

could you mark the top answer as the answer? As it is valid information and works like you asked. — Kerwin Sneijders
– Kerwin Sneijders, Commented Feb 3, 2019 at 22:41

starball · Accepted Answer · 2022-12-24 00:35:36Z

140

I think that the right way is this one:

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

Here I have a js directory in the laravel's app/public folder. There I have a jquery.js file. The function URL::asset() produces the necessary url for you. Same for the css:

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

Keep in mind that the old mehods:

{{ Form::script() }}

and

{{ Form::style() }}

are deprecated and will not work in Laravel 5!

edited Dec 24, 2022 at 0:35

starball♦

59.5k52 gold badges312 silver badges1k bronze badges

answered Mar 7, 2015 at 13:52

Todor Todorov

2,5391 gold badge18 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jeanpier_re Over a year ago

Also note that the assets directory in Laravel 5 is not associated with this facade. That confused me for a second, URL::asset will literally point to your public folder.

Todor Todorov Over a year ago

Yes that's right. You can also use the asset() helper method. It does the same work.

Adam Over a year ago

Why do you not simply write src="/js/jquery.js" and href="/css/somestylesheet.css" ?

dawn Over a year ago

I normally use asset() and it works. Can someone explain the difference?

cnu Over a year ago

the major difference is, asset() works even when you access from sub-directory where as adding src="/js/jquery.js" doesn't work as it always expects files at root level and those js files will not be found hence 404s

Gediminas Šukys · Accepted Answer · 2018-03-09 12:35:49Z

36

Try it.

You can just pass the path to the style sheet .

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

You can just pass the path to the javascript.

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

Add the following lines in the require section of composer.json file and run composer update "illuminate/html": "5.*".

Register the service provider in config/app.php by adding the following value into the providers array:

'Illuminate\Html\HtmlServiceProvider'

Register facades by adding these two lines in the aliases array:

'Form'=> 'Illuminate\Html\FormFacade', 'HTML'=> 'Illuminate\Html\HtmlFacade'

edited Mar 9, 2018 at 12:35

Gediminas Šukys

7,4418 gold badges50 silver badges62 bronze badges

answered Jan 23, 2015 at 7:08

Jay Dhameliya

1,70912 silver badges25 bronze badges

6 Comments

Mansoor Akhtar Over a year ago

The HTML and Form Classes are removed from Laravel 5

Mansoor Akhtar Over a year ago

I have added the following but this is printing the link on webpage as <link media="all" type="text/css" rel="stylesheet" href="localhost/myapp/public/css/test.css">

Mansoor Akhtar Over a year ago

this solved my problem {!! HTML::style('public/css/bootstrap.css') !!}

winkbrace Over a year ago

Active maintenance on the HTML package has been taken over by the Laravel Collective. laravelcollective.com/docs/5.0/html

Seeker Over a year ago

where exactly do we have to write this, {!! HTML::script('js/script.js') !!}, i have js connection problem

|

AkshayBandivadekar · Accepted Answer · 2015-09-23 16:00:35Z

24

In laravel 5.1,

 <link rel="stylesheet" href="{{URL::asset('assets/css/bootstrap.min.css')}}">
 <script type="text/javascript" src="{{URL::asset('assets/js/jquery.min.js')}}"></script>

Where assets folder location is inside public folder

answered Sep 23, 2015 at 16:00

AkshayBandivadekar

85010 silver badges18 bronze badges

Comments

Doni · Accepted Answer · 2015-06-01 12:18:33Z

17

i use this way, don't forget to put your css file on public folder.

for example i put my bootstrap css on

"root/public/bootstrap/css/bootstrap.min.css"

to access from header:

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

hope this help

answered Jun 1, 2015 at 12:18

Doni

6168 silver badges9 bronze badges

Comments

adhix11 · Accepted Answer · 2016-08-11 16:14:54Z

10

Place your assets in public directory and use the following

URL::to()

example

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>

answered Aug 11, 2016 at 16:14

adhix11

1712 silver badges4 bronze badges

Comments

Foysal Nibir · Accepted Answer · 2018-05-17 10:24:53Z

7

At first, you have to put your .css or .js files in the public folder of your project. You may create subfolders to it and move the files into the subfolder. Then you have to do the followings

<link rel="stylesheet" href="{{asset('css/your_css_file.css')}}">
<script src="{{asset('js/your_js_file.js')}}"></script>

In my example, I have created two subfolders called css and js. I put all of the .css and .js files in corresponding folders and use them where ever I want them. Thank you and hope this helps you.

answered May 17, 2018 at 10:24

Foysal Nibir

5534 silver badges14 bronze badges

Comments

Haritsinh Gohil · Accepted Answer · 2019-11-25 12:23:59Z

7

There are many ways to include external css and js files as specified in below code but you can choose one of them, i have tested them all, they work the same.

<link rel="stylesheet" href="{{ asset('css/stylesheet.css') }}" /><!--Recommended-->
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
<link rel="stylesheet" href="{{ URL::to('css/otherstylesheet.css') }}" />
<link rel="stylesheet" href="{{ url('css/anotherstylesheet.css') }}" />

Maybe there are more ways to load it.

but keep in mind that if you are loading the css and js from other than a public folder then better to use Laravel mix.

answered Nov 25, 2019 at 12:23

Haritsinh Gohil

6,31053 silver badges52 bronze badges

Comments

Gediminas Šukys · Accepted Answer · 2018-03-09 12:35:28Z

6

{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}

edited Mar 9, 2018 at 12:35

Gediminas Šukys

7,4418 gold badges50 silver badges62 bronze badges

answered Jan 23, 2015 at 7:01

Julian Camilleri

3,1451 gold badge28 silver badges39 bronze badges

3 Comments

Julian Camilleri Over a year ago

how come? did you try using URL::asset() or app_path() ?

Mansoor Akhtar Over a year ago

this solved my problem thanks {{ asset('public/css/bootstrap.css') }}

laketuna Over a year ago

Instead of HTML, it needs to be Html.

Anoop D · Accepted Answer · 2017-10-25 00:34:38Z

4

Laravel 5.5 comes with mix , the replacement for Elixir, the external css(sass) can be extracted to resources/assets/css(sass) and import to app.css(scss) or give the correct path to your node_module folder that contains the library and can be used as

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

The same can be done for Javascript too .

answered Oct 25, 2017 at 0:34

Anoop D

1,89022 silver badges27 bronze badges

2 Comments

creg Over a year ago

I'm not sure, but I think it only works if you use Mix compiled resources (after generating the versioned file). (laravel.com/docs/5.5/mix#sass)

gtamborero Over a year ago

using <link rel="stylesheet" href="{{ mix('path/file') }}" > is the new way on 5.5 laravel.com/docs/5.5/mix#versioning-and-cache-busting

Chetan Chitte · Accepted Answer · 2016-01-12 13:38:05Z

3

Ok so I was able to figure out for the version 5.2. You will first need to create assets folder in your public folder then put css folder and all css files into it then link it like this :

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

Hope that helps!

answered Jan 12, 2016 at 13:38

Chetan Chitte

14713 bronze badges

1 Comment

Andrew Koper Over a year ago

My CSS file was not being linked to in my blade view. The problem was I had put it in /resources/assets/css/ with the blade views, but the solution was I needed to put it in /public/assets/css/

Ahamed Rasheed · Accepted Answer · 2019-07-24 05:01:46Z

CORRECT & SECURED WAY

If you have a external .css or .js file to add into your page!

My version : Laravel Framework 5.7

If you want to add a External .js file..

Copy your External codes.
Run command npm install in your terminal.
When the above command is executed you can see a folder named node_modules.
Then go to resources/js.
Open file app.js.
Scroll down to the bottom and paste your External JS.
Finally run command npm run dev in your terminal.

your scripts will be updated and its compiled and moved to public/js/app.js . by adding a .js file in public folder will not effect on your page.

If you want to add a External .css file..

Copy your External styles.
Run command npm install in your terminal.
When the above command is executed you can see a folder named node_modules.
Then go to resources/sass.
Open file app.scss.
Scroll down to the bottom and paste your External Styles.
Finally run command npm run dev in your terminal.

your scripts will be updated and its compiled and moved to public/css/app.css . by adding a .css file in public folder will not effect on your page.

Easiest and the safest way to add your external .css and .js.

Laravel JavaScript & CSS Scaffolding

YouTube Compiling Assets

miniPax · Accepted Answer · 2015-08-23 15:05:30Z

2

First you have to install the Illuminate Html helper class:

composer require "illuminate/html":"5.0.*"

Next you need to open /config/app.php and update as follows:

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

'Form' => Illuminate\Html\FormFacade::class, 
'HTML' => Illuminate\Html\HtmlFacade::class,
],

To confirm it’s working use the following command:

php artisan tinker
> Form::text('foo')
"<input name=\"foo\" type=\"text\">"

To include external css in you files, use the following syntax:

{!! HTML::style('foo/bar.css') !!}

answered Aug 23, 2015 at 15:05

miniPax

736 bronze badges

2 Comments

MaXi32 Over a year ago

He said: " Form and Html Helper are removed from this version". He doesn't want to use HTML Helper though..

miniPax Over a year ago

This is a way to get that support back in Laravel 5.0 and thus enabling him to use a syntax he is accustomed to, since he specifically states that the support is removed and he don't know of another way to include external files.

Ryan S · Accepted Answer · 2017-07-16 12:47:43Z

1

I may be late to the party but it's easy to include JS and CSS the Laravel Way by simply using asset() function

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

Hope that helps

answered Jul 16, 2017 at 12:47

Ryan S

6,6081 gold badge23 silver badges14 bronze badges

Comments

Philcz · Accepted Answer · 2019-10-24 08:56:19Z

1

I have been making use of

<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script> 
for javascript and 
     <link rel="stylesheet" href="{{ URL::asset('css/main.css') }}">
for css, this points to the public directory, so you need to keep your css and js files there.

answered Oct 24, 2019 at 8:56

Philcz

651 gold badge1 silver badge10 bronze badges

Comments

ViShU · Accepted Answer · 2023-04-11 18:29:50Z

1

 composer require laravelcollective/html

This command will add laracollective/html package in your project,which is very useful in form creating.After that use

{!! Html::style('public/css/bootstrap.min.css') !!}

{!! Html::script('public/js/jquery.min.js') !!}
{!! Html::script('public/js/bootstrap.min.js') !!}

answered Apr 11, 2023 at 18:29

ViShU

458 bronze badges

Comments

Swastik Mallik · Accepted Answer · 2022-01-26 11:36:38Z

0

It mostly happens due to laravel webpackmix is not yet executed

composer require laravel/ui PHP artisan ui vue --auth //you can use vue boostrap --auth is to add the login paths and

npm install if it's asking to run "npm fund" then do it npm run dev

try this once again

answered Jan 26, 2022 at 11:36

Swastik Mallik

1

Collectives™ on Stack Overflow

How to include External CSS and JS file in Laravel 5

16 Answers 16

5 Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

5 Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related