Las hojas de estilo de Laravel y javascript no se cargan para rutas que no son base

Está bien, sé que este es un problema realmente elemental, pero no puedo resolverlo. Esta es una pregunta sobre Laravel.

Básicamente, tengo mis hojas de estilo incrustadas en mi vista de diseño predeterminada. Actualmente solo estoy usando CSS normal para vincularlos, como:

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

Funciona muy bien cuando estoy en una ruta de un solo nivel, como / about , pero deja de funcionar cuando profundizo, como / about / me .

Si miro la consola de desarrollador de Chrome, veo algunos de los siguientes errores (solo para las rutas más profundas):

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

Así que claramente ahora está buscando el CSS dentro de la carpeta "about", que por supuesto no es una carpeta en absoluto.

Solo quiero que busque en el mismo lugar los activos independientemente de la ruta.

Para Laravel 4 y 5:

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

URL::assetse vinculará a su project/public/carpeta, así que coloque sus scripts allí.

Laravel 4

La forma mejor y correcta de hacer esto

Añadiendo CSS

HTML :: style se vinculará a su proyecto / carpeta pública /

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

Añadiendo JS

HTML :: script se vinculará a su proyecto / carpeta pública /

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

Está utilizando rutas relativas para sus activos, cambie a una ruta absoluta y todo funcionará (agregue una barra antes de "css".

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

en Laravel 5 ,
hay 2 formas de cargar un archivo js en su vista,
primero con ayuda de html y, en segundo lugar, con ayuda de activos.
para usar html helper, primero debe instalar este paquete a través de la línea de comandos:

composer require illuminate/html

luego debe volver a registrarlo, así que vaya a config / app.php y agregue esta línea a la matriz de proveedores

'Illuminate\Html\HtmlServiceProvider'

luego debe definir alias para su paquete html, así que vaya a la matriz de alias en config / app.php y agregue esto

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

ahora su html helper está instalado, por lo que en sus archivos de vista de hoja puede escribir esto:

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

esto buscará su archivo test.js en su project_root / public / js / test.js.
//////////////////////////////////////////////////// ////////////
para usar asistentes de activos en lugar de html, debe escribir algo como esto en sus archivos de vista:

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

esto buscará el archivo test.js en project_root / resources / assets / test.js

Si está utilizando Laravel 3 y sus archivos CSS / JS dentro de una carpeta pública como esta

public/css
public/js

entonces puedes llamarlos usando plantillas Blade como esta

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

Te sugiero que lo pongas en el filtro de ruta antes en {proyecto} /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');

});

y usando el motor de plantilla de hoja

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

o más sobre documentos de gestión de activos de laravel

en laravel 4solo tienes que pegar de {{ URL::asset('/') }}esta manera:

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

Es lo mismo para:

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

Laravel 5.4 con ayuda de mezcla:

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

En Laravel 5.7, coloque su archivo CSS o JS en el directorio público.

Para CSS:

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

Para JS:

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

En mi opinión, la mejor manera es agregar la etiqueta BASE en su HTML

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

Entonces no es necesario usar cosas como

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

Sólo tipo

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

en su opinión y funcionará.

Este método se ocupará de las URL RESTful y los recursos estáticos como imágenes, css, scripts.

Vinsa casi lo hizo bien, deberías agregar

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

y los scripts deben seguir su ruta habitual

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

la razón de esto es porque las imágenes y otras cosas con una ruta relativa como la fuente de la imagen o las solicitudes ajax no funcionarán correctamente sin la ruta base adjunta.

Si lo codifica de forma rígida, probablemente debería utilizar la ruta completa ( href="http://example.com/public/css/app.css"). Sin embargo, esto significa que tendrá que ajustar manualmente las URL para desarrollo y producción.

Una alternativa a las soluciones anteriores sería usarla <link rel="stylesheet" href="URL::to_asset('css/app.css')" />en Laravel 3 o <link rel="stylesheet" href="URL::asset('css/app.css')" />en Laravel 4. Esto te permitirá escribir tu HTML de la manera que quieras, pero también permitirá que Laravel genere la ruta adecuada para ti en cualquier entorno.

Mejor forma de usar me gusta,

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

Suponga que no ha cambiado el nombre de su carpeta pública. Sus archivos css y js están en las subcarpetas css y js de la carpeta pública. Ahora tu encabezado será:

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

Solo agregue otro problema:

Si desea eliminar /publicde su proyecto usando .htaccess,

entonces puedes usar esto, [Agregar publicantes /cssadentro asset()]

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

[A veces, es útil].

Para Laravel 4: {!! para una llave doble {{
y para Laravel 5 y versiones superiores: puede reemplazar {!! por {{y !!} por}} en la versión de gama alta

Si ha colocado JavaScript en un directorio definido personalizado.
Por ejemplo, si su jQuery-2.2.0.min.jsse coloca en el directorio, resources/views/admin/plugins/js/entonces *.blade.phppodrá agregar al final de la sección como

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

Dado que la versión Higher-End también es compatible con la versión Lower-End y no al revés

La forma mejor y correcta de hacer esto:

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

En Laravel 5.8

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

me acaba de hacer el truco.

coloque su archivo de script en el directorio público y luego use (por ejemplo, para userFunctions.js)

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