web-dev-qa-db-fra.com

Comment inclure un fichier CSS et JS externe dans Laravel 5

J'utilise Laravel 5.0, le formulaire et HTML Helper sont supprimés de cette version, je ne sais pas comment inclure des fichiers externes css et js dans mon fichier d'en-tête. Actuellement, j'utilise ce code.

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

Je pense que la bonne façon est celle-ci:

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

Ici, j'ai un répertoire js dans le dossier app/public de laravel. Là j'ai un fichier jquery.js. La fonction URL :: asset () produit l'URL nécessaire pour vous. Idem pour le css:

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

J'espère que cela t'aides.

Gardez à l'esprit que les anciennes méthodes: 

{{ Form::script() }}

et

{{ Form::style() }}

sont obsolètes et ne fonctionneront pas dans Laravel 5!

106
TodStoychev

Essayez-le.

Vous pouvez simplement passer le chemin de la feuille de style.

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

Vous pouvez simplement indiquer le chemin d'accès au javascript.

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

Ajoutez les lignes suivantes dans la section require de composer.json fichier et lancez composer update "illuminate/html": "5. *" .

Enregistrez le fournisseur de services dans config/app.php en ajoutant la valeur suivante dans le tableau providers:

'Illuminate\Html\HtmlServiceProvider'

Enregistrez les façades en ajoutant ces deux lignes dans le tableau des alias:

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

32
Jay Dhameliya

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

Où l'emplacement du dossier des actifs est à l'intérieur du dossier public

22
AkshayBandivadekar

j'utilise cette façon, n'oubliez pas de mettre votre fichier css sur un dossier public.

par exemple je mets mon css bootstrap 

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

accéder à partir de l'en-tête:

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

espérons que cette aide

12
Doni

Placez vos actifs dans un répertoire public et utilisez les éléments suivants

URL::to()

exemple

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
10
adhix11
{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}
7
Julian Camilleri

Ok, j'ai donc pu comprendre la version 5.2. Vous devez d’abord créer un dossier d’actifs dans votre dossier public, puis y placer le dossier css et tous les fichiers css, puis le lier comme suit: 

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

J'espère que cela pourra aider!

3
Chetan Chitte

Au début, vous devez placer vos fichiers .css ou .js dans le dossier public de votre projet. Vous pouvez créer des sous-dossiers et déplacer les fichiers dans le sous-dossier. Ensuite, vous devez faire ce qui suit

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

Dans mon exemple, j'ai créé deux sous-dossiers appelés css et js. Je mets tous les fichiers .css et .js dans les dossiers correspondants et les utilise où je le veux. Merci et espérons que cela vous aide.

3
Foysal Nibir

Vous devez d’abord installer la classe d’assistance Illuminate Html:

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

Ensuite, vous devez ouvrir /config/app.php et mettre à jour comme suit:

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

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

Pour confirmer le bon fonctionnement, utilisez la commande suivante:

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

Pour inclure des fichiers CSS externes dans vos fichiers, utilisez la syntaxe suivante:

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

Je peux être en retard à la fête mais il est facile d'inclure JS et CSS à la manière de Laravel en utilisant simplement la fonction asset ()

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

J'espère que cela pourra aider

1
Ryan S

_ {Si vous avez un fichier externe .css ou .js à ajouter à votre page!} _

Ma version: Laravel Framework 5.7

Si vous souhaitez ajouter un fichier .js externe ..

  1. Copiez vos codes externes.
  2. Exécutez la commande npm install dans votre terminal.
  3. Lorsque la commande ci-dessus est exécutée, vous pouvez voir un dossier nommé node_modules.
  4. Ensuite, accédez à resources/js.
  5. Ouvrir le fichier app.js.
  6. Faites défiler vers le bas et collez votre JS externe.
  7. Enfin, exécutez la commande npm run dev dans votre terminal.

vos scripts seront mis à jour, compilés et déplacés vers public/js/app.js. en ajoutant un fichier .js dans un dossier public n’affectera pas votre page.

Si vous souhaitez ajouter un fichier .css externe ..

  1. Copiez vos styles externes.
  2. Exécutez la commande npm install dans votre terminal.
  3. Lorsque la commande ci-dessus est exécutée, vous pouvez voir un dossier nommé node_modules.
  4. Ensuite, allez à resources/sass.
  5. Ouvrir le fichier app.scss.
  6. Faites défiler vers le bas et collez vos styles externes.
  7. Enfin, exécutez la commande npm run dev dans votre terminal.

vos scripts seront mis à jour, compilés et déplacés vers public/css/app.css. en ajoutant un fichier .css dans un dossier public n’affectera pas votre page.

  • Le moyen le plus simple et le plus sûr d’ajouter vos fichiers .css et .js externes.

Laravel Échafaudages JavaScript et CSS

YouTube Compilation des actifs

0
Ahamed Rasheed