-1

Veran, tengo un fichero llamado estilos.css con el siguiente código:

div{background-color: #000000;}

Lo he almacenado en el directorio public/css, y ahora la historia es como lo paso a las vistas. He probado ponerlo así:

<link rel="stylesheet" type="text/css" href="/public/css/stilo.css" />

Pero no he logrado resultados. ¿Cómo seria correcto?

Más detalles: Tengo un fichero estilos.css con el siguiente código:

body{
    color: red;
}

Y lo pongo dentro de la etiqueta "head" en app.blade.php:

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

introducir la descripción de la imagen aquí

Despues, introduzco dentro de "body" el siguiente código:

style="color:red"

introducir la descripción de la imagen aquí

Aqui en cambio si funciona. A ver que estare haciendo mal.

3 respuestas 3

5

Si no estás usando Laravel Collective, entonces puedes usar alguno de los helpers de Laravel, por cierto no es necesario el atributo type, ya estamos en HTML5.

Personalmente prefiero usar el helper asset() para los llamados a recursos estáticos:

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

Sin embargo, normalmente debería funcionar incluso sin el helper, aunque realmente es mejor práctica con el helper anterior:

<link rel="stylesheet" href="css/stilo.css" />
4
  • Ninguno de los 2 modos me ha funcionado. el 20 feb. 2018 a las 21:45
  • 1
    Te invito a revisar la documentación, algo estás haciendo mal, es de las cosas más sencillas en Laravel.
    – Shaz
    el 20 feb. 2018 a las 21:46
  • He actualizado la información. el 21 feb. 2018 a las 20:38
  • ¿qué código de respuesta arroja al llamar el archivo de los estilos? me refiero al código HTTP que muestra en el navegador.
    – Shaz
    el 22 feb. 2018 a las 13:45
2

Deberías usar siempre rutas absolutas para la carga de recursos como CSS, JS e imágenes, sin embargo esto puede no funcionar si estás desarrollando en local ya que dependerá de la configuración de el entorno utilizas, si tienes configurados dominios virtuales, etc.

En Laravel se denomina asset a cada uno de los recursos mencionados, del directorio public, y se cargan sin problemas, independientemente del entorno donde está la aplicación, si usamos la función del mismo nombre. Así tenemos que:

Cargar una hoja de estilos:

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

Cargar un icono (para los favoritos del navegador):

<link rel="icon" href="{!! asset('favicon.ico') !!}" type="image/x-icon">

Cargar librería JS:

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

Cargar una imagen:

<img src="{{ asset('imagenes/foto.JPG') }}" alt="mi foto">
0

No se si aun tendras este problema, pero yo tambien lo tenia y lo pude solucionar recien asique lo dejo por aqui por si alguien mas se llegase a topar con este problema.. al utilizar Asset tienen que fijarse bien en la ruta que utiliza, esto lo pueden ver en el navegador presionando 12, en mi caso la ruta es la siguiente:

http://localhost/nombreproyecto/public/css/app.css

Pero al generar el proyecto, el archivo app.css se encuentra en la ruta:

http://localhost/nombreproyecto/resources/app.css

Si te soy sincero no se como modificar la ruta del Asset, pero ubicando el archivo css en la segunda ruta que puse, el problema se soluciona, es decir.. Crear la carpeta css en /public y poner dentro el archivo app.css

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.