How to include External CSS and JS file in Laravel

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>

Answer 1

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 .

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Hope this helps.

Keep in mind that the old mehods:

{{ Form::script() }}

and

{{ Form::style() }}

are deprecated and will not work in Laravel 5!

Answer 6

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'