Ways – how to include css and js in Laravel 5
It’s a basic need to include external or internal css and js in our application. Also laravel 5 has many ways to include css and js in application. Today we’ll discuss how to include css and js in Laravel 5 application. Before laravel 5 we are using HtmlBuilder to add style and scripts. But in laravel 5 HtmlBuilder has been removed, so HTML::style() is no longer available. If you want to use it in laravel 5 Follow previous article Class form and html. After including HtmlBuilder package you can easily add your css and js in laravel 5 application. There are many ways to include css and js in laravel 5. But we are using two methods HtmlBuilder and URL::asset().
1. Using HtmlBuilder :- After include html package you can use HTML class methods to add script and style to your application.
To include internal css and js :-
{!!Html::style('css/style.css')!!}
{!!Html::script('js/script.js')!!}Note:- Default path will be your application root. so css and js directory would be located on your application root.Also class is case sensitive. if you are using upper case letter “HTML” then you will get error – Class ‘HTML’ not found.
To include external css and js :-
{!!Html::style('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css')!!}
{!!Html::script('//code.angularjs.org/1.2.13/angular.js')!!}If you get error Class ‘HTML’ not found make sure, you are using same case which your are used in providers array in “config/app.php”. like if your “config/app.php” have.
'Html' => 'Illuminate\Html\HtmlFacade',You must use Html::style() or Html::script(). If in upper case HTML then use upper.
2. Using URL Class :- This class is inbuilt in laravel 5. so you can easily add your css and js using it’s methods.
To include internal css and js :-
<link rel="stylesheet" href="{{ URL::asset('css/bootstrap.css') }}">
<script type="text/javascript" src="{{ URL::asset('js/jquery.min.js') }}"></script>Note:- Default path will be your application root. so css and js directory would be located on your application root.
To include external css and js :-
<link rel="stylesheet" href="{{ URL::asset('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css') }}">
<script type="text/javascript" src="{{ URL::asset('//code.angularjs.org/1.2.13/angular.js') }}"></script>Using both methods you can easily add your css and js to laravel application. These methods make html style and script tags auto, so no need to write lines of code for these tags.