Les feuilles de style Laravel et javascript ne se chargent pas pour les routes non de base

D'accord - je sais que c'est un problème vraiment élémentaire, mais je ne peux pas le comprendre. C'est une question concernant Laravel.

Fondamentalement, mes feuilles de style sont intégrées dans ma vue de mise en page par défaut. J'utilise actuellement juste le CSS standard pour les lier, tels que:

<link rel="stylesheet" href="css/app.css" />

Cela fonctionne très bien lorsque je suis sur une route à un niveau tel que / about , mais cesse de fonctionner lorsque je vais plus loin, comme / about / me .

Si je regarde la console développeur de Chrome, je vois certaines des erreurs suivantes (uniquement pour les itinéraires plus profonds):

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://example.dev/about/css/app.css".

Il est donc clair qu'il recherche maintenant le css dans le dossier "about" - qui n'est bien sûr pas du tout un dossier.

Je veux juste qu'il recherche au même endroit les actifs, quel que soit l'itinéraire.

Pour Laravel 4 & 5:

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

URL::assetsera lié à votre project/public/dossier, alors jetez vos scripts là-dedans.

Laravel 4

La meilleure et correcte façon de faire cela

Ajout de CSS

HTML :: style sera lié à votre projet / public / dossier

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

Ajout de JS

HTML :: script établira un lien vers votre projet / public / dossier

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

Vous utilisez des chemins relatifs pour vos actifs, passez à un chemin absolu et tout fonctionnera (ajoutez une barre oblique avant "css".

<link rel="stylesheet" href="/css/app.css" />

dans Laravel 5 ,
il existe 2 façons de charger un fichier js dans votre vue: la
première consiste à utiliser l'aide html, la seconde à utiliser les assistants d'actifs.
pour utiliser l'aide html, vous devez d'abord installer ce package via la ligne de commande:

composer require illuminate/html

alors vous devez le réinscrire, alors allez dans config / app.php, et ajoutez cette ligne au tableau des fournisseurs

'Illuminate\Html\HtmlServiceProvider'

alors vous devez définir des alias pour votre package html, alors allez dans le tableau d'alias dans config / app.php et ajoutez ceci

'Html'     => 'Illuminate\Html\HtmlFacade'

maintenant votre assistant html est installé, donc dans vos fichiers de vue en lame, vous pouvez écrire ceci:

{!! Html::script('js/test.js') !!}

cela recherchera votre fichier test.js dans votre racine_projet / public / js / test.js.
//////////////////////////////////////////////////// ////////////
pour utiliser des assistants d'actifs au lieu de l'aide html, vous devez écrire qc comme ceci dans vos fichiers de vue:

<script src="{{ URL::asset('test.js') }}"></script>

cela cherchera le fichier test.js dans project_root / resources / assets / test.js

Si vous utilisez Laravel 3 et vos fichiers CSS / JS dans un dossier public comme celui-ci

public/css
public/js

alors vous pouvez les appeler en utilisant des modèles Blade comme celui-ci

{{ HTML::style('css/style.css'); }}
{{ HTML::script('js/jquery-1.8.2.min.js'); }}

je vous suggère de le mettre sur le filtre de route avant sur {project} /application/routes.php

Route::filter('before', function()
{
    // Do stuff before every request to your application...    
    Asset::add('jquery', 'js/jquery-2.0.0.min.js');
    Asset::add('style', 'template/style.css');
    Asset::add('style2', 'css/style.css');

});

et en utilisant le moteur de gabarit de lame

{{ Asset::styles() }}
{{ Asset::scripts(); }}

ou plus sur laravel gestion des documents sur les actifs

en laravel 4vous avez juste à coller de {{ URL::asset('/') }}cette façon:

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

Il en va de même pour:

  <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.js"></script>
  <img src="{{ URL::asset('/') }}img/image.gif">

Laravel 5.4 avec mix helper:

<link href="{{ mix('/css/app.css') }}" rel="stylesheet">
<script src="{{ mix('/js/app.js') }}"> </script>

Dans Laravel 5.7, placez votre fichier CSS ou JS dans le répertoire public.

Pour CSS:

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

Pour JS:

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

Le meilleur moyen à mon avis d'ajouter la balise BASE dans votre HTML

<base href="/" target="_top">

Il n'est donc pas nécessaire d'utiliser des choses comme

{{ HTML::script('js/jquery/jquery-1.11.1.min.js'); }}

tapez simplement

<script src="js/jquery/jquery-1.11.1.min.js"></script>

à votre avis et cela fonctionnera.

Cette méthode traitera les URL RESTful et les ressources statiques sous forme d'images, css, scripts.

Vinsa avait presque raison, tu devrais ajouter

<base href="{{URL::asset('/')}}" target="_top">

et les scripts doivent suivre leur chemin normal

<script src="js/jquery/jquery-1.11.1.min.js"></script>

la raison en est que les images et autres choses avec un chemin relatif comme la source d'image ou les requêtes ajax ne fonctionneront pas correctement sans le chemin de base attaché.

Si vous le codez en dur, vous devriez probablement utiliser le chemin complet ( href="http://example.com/public/css/app.css"). Cependant, cela signifie que vous devrez ajuster manuellement les URL pour le développement et la production.

Une alternative aux solutions ci-dessus serait d'utiliser <link rel="stylesheet" href="URL::to_asset('css/app.css')" />dans Laravel 3 ou <link rel="stylesheet" href="URL::asset('css/app.css')" />dans Laravel 4. Cela vous permettra d'écrire votre HTML comme vous le souhaitez, mais aussi de laisser Laravel générer le chemin approprié pour vous dans n'importe quel environnement.

Meilleure façon d'utiliser comme,

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

Supposons que vous n'ayez pas renommé votre dossier public. Vos fichiers css et js se trouvent dans les sous-dossiers css et js du dossier public. Maintenant, votre en-tête sera:

<link rel="stylesheet" type="text/css" href="/public/css/icon.css"/>
<script type="text/javascript" src="/public/js/jquery.easyui.min.js"></script>

Ajoutez simplement un autre problème:

Si vous souhaitez supprimer /publicde votre projet en utilisant .htaccess,

alors vous pouvez utiliser ceci, [Add publicbefore /cssinside asset()]

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

[Parfois, c'est utile.]

Pour Laravel 4: {!! pour une double accolade {{
et pour la version Laravel 5 et plus: vous pouvez remplacer {!! par {{et !!} par}} en version haut de gamme

Si vous avez placé JavaScript dans un répertoire personnalisé.
Par exemple, si votre jQuery-2.2.0.min.jsest placé sous le répertoire, à resources/views/admin/plugins/js/partir du, *.blade.phpvous pourrez ajouter à la fin de la section comme

<script src="{!! asset('resources/views/admin/plugins/js/jQuery-2.2.0.min.js') !!}"></script>

Depuis la version haut de gamme prend également en charge la version bas de gamme et mais pas vice-versa

La meilleure et correcte façon de faire ceci:

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

Dans Laravel 5.8

<script src="{{asset('js/customPath1/customPath2/customjavascript.js')}}"></script>

vient de faire le truc pour moi.

placez votre fichier de script dans le répertoire public puis utilisez (par exemple pour userFunctions.js)

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