Laravel 5 में बाहरी CSS और JS फाइल को कैसे शामिल करें

Question

मैं Laravel 5.0 का उपयोग कर रहा हूं, फॉर्म और Html हेल्पर को इस संस्करण से हटा दिया गया है, मुझे नहीं पता कि मेरी हेडर फ़ाइल में बाहरी सीएसएस और जेएस फ़ाइलों को कैसे शामिल किया जाए। वर्तमान में मैं इस कोड का उपयोग कर रहा हूं।

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

Comments

could you mark the top answer as the answer? As it is valid information and works like you asked.

— Kerwin Sneijders

Answer 1

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!

Comments

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.

— jeanpier_re

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

— Todor Todorov

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

— Adam

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

— dawn

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

— cnu

Answer 2

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'

Comments

The HTML and Form Classes are removed from Laravel 5

— Mansoor Akhtar

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

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

— Mansoor Akhtar

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

— winkbrace

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

— Seeker

Answer 3

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

Answer 4

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

Answer 5

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>

Answer 6

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

Comments

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

— Julian Camilleri

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

— Mansoor Akhtar

Instead of HTML, it needs to be Html.

— musicliftsme

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

Answer 8

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!

Comments

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/

— Andrew Koper

Answer 9

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 .

Comments

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)

— creg

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

— gtamborero

Answer 10

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

Comments

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

— MaXi32

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.

— miniPax

Answer 11

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

Answer 12

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 13

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.

Answer 14

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.