Cómo incluir archivos CSS y JS externos en Laravel 5


81

Estoy usando Laravel 5.0, Form y Html Helper se eliminan de esta versión, no sé cómo incluir archivos CSS y js externos en mi archivo de encabezado. Actualmente estoy usando este código.

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

1
¿Podría marcar la respuesta principal como la respuesta? Ya que es información válida y funciona como lo solicitó.
Kerwin Sneijders

Respuestas:


126

Creo que la forma correcta es esta:

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

Aquí tengo un jsdirectorio en la app/publiccarpeta de laravel . Ahí tengo un jquery.jsarchivo. La función URL :: asset () produce la URL necesaria para usted. Lo mismo para el CSS:

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

Espero que esto ayude.

Tenga en cuenta que los métodos antiguos:

{{ Form::script() }}

y

{{ Form::style() }}

están obsoletos y no funcionarán en Laravel 5!


3
También tenga en cuenta que el directorio de activos en Laravel 5 no está asociado con esta fachada. Eso me confundió por un segundo, URL::assetliteralmente apuntará a su carpeta pública.
jeanpier_re

5
Sí, eso es correcto. También puede utilizar el asset()método de ayuda. Hace el mismo trabajo.
Todor Todorov

¿Por qué no escribe simplemente src="/js/jquery.js"y href="https://stackoverflow.com/css/somestylesheet.css"?
Adam

Normalmente lo uso asset()y funciona. ¿Alguien puede explicar la diferencia?
amanecer

la principal diferencia es que asset()funciona incluso cuando accede desde el subdirectorio, donde la adición src="/js/jquery.js"no funciona, ya que siempre espera archivos en el nivel raíz y esos archivos js no se encontrarán, por lo tanto, 404s
cnu

34

Intentalo.

Simplemente puede pasar la ruta a la hoja de estilo.

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

Simplemente puede pasar la ruta al javascript.

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

Agregue las siguientes líneas en la sección require del archivo composer.json y ejecute la actualización del compositor "illuminate / html": "5. *" .

Registre el proveedor de servicios en config / app.php agregando el siguiente valor en la matriz de proveedores:

'Illuminate\Html\HtmlServiceProvider'

Registre las fachadas agregando estas dos líneas en la matriz de alias:

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


5
Las clases HTML y Form se eliminan de Laravel 5
Mansoor Akhtar

1
Agregué lo siguiente, pero esto imprime el enlace en la página web como <link media = "all" type = "text / css" rel = "stylesheet" href = " localhost / myapp / public / css / test.css ">
Mansoor Akhtar

1
esto resolvió mi problema {!! HTML :: style ('public / css / bootstrap.css') !!}
Mansoor Akhtar

2
Laravel Collective se ha hecho cargo del mantenimiento activo del paquete HTML. laravelcollective.com/docs/5.0/html
winkbrace

dónde exactamente tenemos que escribir esto, {!! HTML :: script ('js / script.js') !!}, tengo un problema de conexión js
Seeker

24

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

Donde la ubicación de la carpeta de activos está dentro de la carpeta pública


16

Yo uso de esta manera, no olvides poner tu archivo css en una carpeta pública.

por ejemplo, puse mi bootstrap css en

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

para acceder desde el encabezado:

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

espero que esto ayude


10

Coloque sus activos en un directorio público y use lo siguiente

URL::to()

ejemplo

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>


5

Al principio, debes poner tus archivos .csso .jsen la publiccarpeta de tu proyecto. Puede crear subcarpetas y mover los archivos a la subcarpeta. Entonces tienes que hacer lo siguiente

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

En mi ejemplo, he creado dos subcarpetas llamadas css y js. Pongo todos los archivos .cssy .jsen las carpetas correspondientes y los uso donde quiero. Gracias y espero que esto te ayude.


3

Ok, pude averiguar la versión 5.2. Primero deberá crear la carpeta de activos en su carpeta pública, luego colocar la carpeta css y todos los archivos css en ella y luego vincularla así:

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

¡Espero que ayude!


Mi archivo CSS no estaba vinculado en mi vista de hoja. El problema era que lo había puesto en / resources / assets / css / con las vistas de hoja, pero la solución era que necesitaba ponerlo en / public / assets / css /
Andrew Koper

3

Laravel 5.5 viene con mix, el reemplazo de Elixir, el css externo (sass) se puede extraer a resources / assets / css (sass) e importar a app.css (scss) o dar la ruta correcta a su carpeta node_module que contiene el biblioteca y se puede utilizar como

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

También se puede hacer lo mismo con Javascript.


No estoy seguro, pero creo que solo funciona si usa recursos compilados de Mix (después de generar el archivo versionado). ( laravel.com/docs/5.5/mix#sass )
creg

usar <link rel = "stylesheet" href = "{{mix ('path / file')}}"> es la nueva forma en 5.5 laravel.com/docs/5.5/mix#versioning-and-cache-busting
gtamborero

2

Primero debe instalar la clase auxiliar Illuminate Html:

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

A continuación, debe abrir /config/app.php y actualizar de la siguiente manera:

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

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

Para confirmar que está funcionando, use el siguiente comando:

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

Para incluir CSS externo en sus archivos, utilice la siguiente sintaxis:

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

Dijo: "Formulario y Html Helper se eliminan de esta versión". Sin embargo, no quiere usar HTML Helper ..
MaXi32

Esta es una forma de recuperar ese soporte en Laravel 5.0 y, por lo tanto, permitirle usar una sintaxis a la que está acostumbrado, ya que específicamente afirma que se elimina el soporte y no conoce otra forma de incluir archivos externos.
miniPax

2

MODO CORRECTO Y SEGURO


¡Si tiene un archivo externo .csso .jspara agregar a su página!

Mi versión: Laravel Framework 5.7

Si desea agregar un .jsarchivo externo ...

  1. Copie sus códigos externos.
  2. Ejecute el comando npm installen su terminal.
  3. Cuando se ejecuta el comando anterior, puede ver una carpeta llamada node_modules.
  4. Luego vaya a resources / js .
  5. Abrir archivo app.js.
  6. Desplácese hacia abajo y pegue su JS externo.
  7. Finalmente ejecute el comando npm run deven su terminal.

sus scripts se actualizarán y se compilarán y moverán a public/js/app.js. agregar un .jsarchivo en una carpeta pública no afectará su página.


Si desea agregar un .cssarchivo externo ...

  1. Copie sus estilos externos.
  2. Ejecute el comando npm installen su terminal.
  3. Cuando se ejecuta el comando anterior, puede ver una carpeta llamada node_modules.
  4. Luego ve a resources / sass .
  5. Abrir archivo app.scss.
  6. Desplácese hacia abajo y pegue sus Estilos externos.
  7. Finalmente ejecute el comando npm run deven su terminal.

sus scripts se actualizarán y se compilarán y moverán a public/css/app.css. agregar un .cssarchivo en una carpeta pública no afectará su página.

  • La forma más fácil y segura de agregar su .css y .js externos.

Laravel JavaScript y andamios CSS

Activos de compilación de YouTube


1

Puede que llegue tarde a la fiesta, pero es fácil incluir JS y CSS al estilo Laravel simplemente usando la función asset ()

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

Espero que ayude


1

Yo he estado haciendo uso de

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

0

Hay muchas formas de incluir archivos css y js externos como se especifica en el código a continuación, pero puede elegir una de ellas, las he probado todas, funcionan igual.

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

Quizás haya más formas de cargarlo.

pero tenga en cuenta que si está cargando css y js desde otra carpeta que no sea pública, es mejor usar Laravel mix.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.