CODEWITHSUNDEEP
phplaravel-5
Mansoor Akhtar
Mansoor Akhtar

Reputation: 2316

How to include External CSS and JS file in Laravel 5

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>

Upvotes: 95

Views: 319440

Answers (16)

ViShU
ViShU

Reputation: 45

 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') !!}

Upvotes: 1

Todor Todorov
Todor Todorov

Reputation: 2541

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!

Upvotes: 140

Swastik Mallik
Swastik Mallik

Reputation: 1

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

Upvotes: 0

Haritsinh Gohil
Haritsinh Gohil

Reputation: 6272

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.

Upvotes: 7

Philcz
Philcz

Reputation: 65

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.

Upvotes: 1

Ahamed Rasheed
Ahamed Rasheed

Reputation: 779

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

  1. Copy your External codes.
  2. Run command npm install in your terminal.
  3. When the above command is executed you can see a folder named node_modules.
  4. Then go to resources/js.
  5. Open file app.js.
  6. Scroll down to the bottom and paste your External JS.
  7. 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..

  1. Copy your External styles.
  2. Run command npm install in your terminal.
  3. When the above command is executed you can see a folder named node_modules.
  4. Then go to resources/sass.
  5. Open file app.scss.
  6. Scroll down to the bottom and paste your External Styles.
  7. 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

Upvotes: 3

Foysal Nibir
Foysal Nibir

Reputation: 553

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.

Upvotes: 7

Jay Dhameliya
Jay Dhameliya

Reputation: 1699

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'

Upvotes: 36

Julian Camilleri
Julian Camilleri

Reputation: 3095

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

Upvotes: 6

Anoop D
Anoop D

Reputation: 1830

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 .

Upvotes: 4

Ryan S
Ryan S

Reputation: 6474

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

Upvotes: 1

adhix11
adhix11

Reputation: 171

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>

Upvotes: 10

Chetan Chitte
Chetan Chitte

Reputation: 147

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!

Upvotes: 3

AkshayBandivadekar
AkshayBandivadekar

Reputation: 840

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

Upvotes: 24

miniPax
miniPax

Reputation: 73

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') !!}

Upvotes: 2

Doni
Doni

Reputation: 616

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

Upvotes: 17

Related Questions