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

97

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.

Pete
fuente

Respuestas:

168

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


Nota: Para ello, debe utilizar el " motor de plantillas Blade ". Los archivos Blade usan la .blade.phpextensión.

gan
fuente
8
Solo confirmando que funciona en Laravel 5 y 5.1 también. Gracias.
Filip Filipović
1
He creado mi propio paquete. ¿puedo tener css dentro? Si es así, ¿cómo puedo incluir CSS de mi propio paquete?
chourn solidet
También puede utilizar el asset()método auxiliar instantáneo de URL::asset(). Hace el mismo trabajo.
Marek Skiba
3
También funciona en Laravel 5.4 .
user3426112
¿Qué pasa si desea la versión minificada en producción pero no en desarrollo?
geoidesic
52

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') }}
mXX
fuente
13

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" />
Alexandre Danault
fuente
Esto no funcionará si su aplicación está ubicada en un subdirectorio del sitio. Luego se encuentra con el problema de que está mirando demasiado atrás para sus activos. Mi recomendación es utilizar la solución proporcionada por @Chris. Esto elimina TODAS las conjeturas y le permite mover su aplicación a cualquier lugar, y aún así asegurarse de que cargará los activos correctamente.
Tim F
10

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

Salar
fuente
illuminate / html ha sido abandonado. En su lugar, utilice laravelcollective / html.
geoidesic
También puede usar <script src="{{ url(asset('test.js')) }}"></script>(o <script src="{{ url(mix('test.js')) }}"></script>si está usando Laravel Mix).
snipe
9

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'); }}
Fernando Montoya
fuente
6

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

Andry Yosua
fuente
sí, este nuevo laravel hace que todo sea complicado, los activos, incluso el generador de perfiles ya no están en la documentación ..
Andry Yosua
3

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">
fravemel
fuente
3

Laravel 5.4 con ayuda de mezcla:

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

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>
Inocente TRA BI
fuente
2

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
fuente
2

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.

Cptmaxon
fuente
1

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.

mckendricks
fuente
1

Mejor forma de usar me gusta,

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

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>
Hafsul Maru
fuente
1

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

Maniruzzaman Akash
fuente
0

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

Nɪsʜᴀɴᴛʜ ॐ
fuente
0

La forma mejor y correcta de hacer esto:

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

En Laravel 5.8

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

me acaba de hacer el truco.

Oceceli
fuente
0

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

fuente