¿Usar CSS en las vistas de Laravel?

108

Acabo de comenzar a aprender Laravel y puedo hacer los conceptos básicos de un controlador y enrutamiento.

Mi sistema operativo es Mac OS X Lion y está en un servidor MAMP.

Mi código de route.php:

Route::get('/', function() {
    return View::make('home.index');
});

Route::get('businesses', function() {
    return View::make('businesses.index');
});

Route::get('testing', function() {
    return View::make('testing.index');
});        

Route::get('hello', function() {
    return "<h3>Hello world!</H3>";
});

Eso funciona, las vistas se muestran perfectamente, '' sin embargo '' lo que quiero intentar y hacer es incluir CSS dentro de las vistas, intenté agregar un enlace a una hoja de estilo dentro del directorio, pero la página lo mostró como la fuente predeterminada del navegador incluso aunque el CSS estaba en HTML!

Este es index.php de las empresas dentro de la carpeta de vistas:

<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<p>Business is a varied term. My content here.

Intenté usar el motor de plantilla Blade en mi carpeta de otras vistas (prueba) para mostrar CSS, ¡pero nuevamente el CSS no se mostró a pesar de estar en la carpeta de prueba!

¿Cómo puedo superar este problema y mejorar, mientras estoy aprendiendo lentamente este marco?

php frameworks laravel

— avenas8808
fuente

¿Qué versión de laravel estás usando?

— Negro

5

{{ URL::asset('css/css.css') }}

— vishalknishad

156

Pon tus activos en la carpeta pública

public/css
public/images
public/fonts
public/js

Y lo llamaron usando Laravel

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

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

— Fernando Montoya
fuente

2

No llames a CSS dentro de @section ni nada, si usas Blade, ¡funcionó para mí!

— star18bit

3

Tienes que usar Blade para que esa sintaxis funcione. Si no está usando Blade, entonces tendría que ir con: <? Php echo HTML :: style ('css / common.css');?>

— Nicholas Kreidberg

6

Esto es diferente ahora para laravel 5.0, donde el paquete se iluminan / html ya no se incluye por defecto laracasts.com/series/laravel-5-fundamentals/episodes/10 para más detalles

— dangel

1

Si esto no funciona para usted, esto es lo que funcionó para mí: stackoverflow.com/questions/15232600/…

— Dan Klos

1

Tampoco funciona para mí. Error fatal: clase 'HTML' no encontrada

— geoidesic

56

Pon tus activos en la carpeta pública

public/css
public/images
public/fonts
public/js

Y luego lo llamo usando Laravel

{{ URL::asset('js/scrollTo.js'); }} // Generates the path to public directory public/js/scrollTo.js

{{ URL::asset('css/css.css'); }}   // Generates the  path to public directory public/css/css.css

(O)

{{ HTML::script('js/scrollTo.js'); }} // Generates the  path to public directory public/js/scrollTo.js

{{ HTML::style('css/css.css'); }} // Generates the path to public directory public/css/css.css

— Desarrollador principal
fuente

URL :: asset () está incorporado mientras que HTML :: style () requiere un paquete

— omarjebari

¿Puede agregar a su respuesta dónde llamar a este código {{ URL::asset('js/scrollTo.js'); }}? ¿Puede dar un ejemplo?

— Ramesh Pareek

43

su archivo css pertenece a la carpeta pública o una subcarpeta de la misma.

fe si pones tu css en

public/css/common.css

usarías

HTML::style('css/common.css');

En tu vista de hoja ...

O también puede usar la clase de activos http://laravel.com/docs/views/assets ...

— André Keller
fuente

No, esto no hace ninguna diferencia. No puedo acceder a nada a través del navegador contenido en esos directorios ...

— dcolumbus

@dcolumbus Si el 404 que estás recibiendo es generado por Laravel (es decir, no es el servidor predeterminado), es posible que te falte la siguiente línea en tu .htaccess (asumiendo que estás usando Apache): "RewriteCond% {REQUEST_FILENAME}! -F". Esa línea debe ir por encima de la que tiene index.php, y evitará que las solicitudes a las rutas que existen en el sistema de archivos sean manejadas por el sistema de enrutamiento de Laravel. Si el 404 recibido no es generado por Laravel, debe agregar "AllowOverride All" a su configuración de Apache para que se procese el .htaccess (consulte los documentos de Apache para obtener más información).

— tjbp

Dijo que quiere poner los archivos css dentro de la carpeta de vista, no la carpeta pública, asset () y HTML :: style / HTML :: script todos apuntan al directorio público, laravel no permite que nada dentro de la carpeta de la aplicación sea accedido por asuntos externos por motivos de seguridad. Entonces, incluso si hay index.php o no, no importa lo que quiera.

— Bryan P

26

También puede escribir una etiqueta de enlace simple como lo haría normalmente y luego usar el atributo href:

<link rel="stylesheet" href="<?php echo asset('css/common.css')?>" type="text/css">

por supuesto, debe poner su archivo css en public / css

— Diego Castaño
fuente

@dcolumbus 404 tal vez porque da una ruta incorrecta, intente agregar el prefijo / public /, laravel predeterminado tiene prefijo / public / /public/css/common.css

— david valentino

23

Podemos hacer esto de la siguiente manera.

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

{{ HTML::style('css/style.css', array('media' => 'print')) }}

Buscará el archivo de estilo en la carpeta pública de Laravel y luego lo renderizará.

— Ahmad Sharif
fuente

1

Genial Ahmad, funcionará bien si http enlazas la hoja de estilo sobre <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet"> pero si estás usando httpsentonces el la solicitud se bloqueará y aparecerá un error de contenido mixto. Para usarlo en https, debe usar secure_assetcomo <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset

— Pandey

Solo se necesitan 2 corchetes, no 3.

— Oleg Abrazhaev

Si usa esta solución para laravel 5, debe instalar el proveedor LaravelCollective Forms & HTML. Consulte: laravelcollective.com/docs/5.4/html para obtener instrucciones. No olvide ejecutar la "actualización del compositor" después de haber actualizado composer.json.

— Asimov

15

Como mencionó Ahmad Sharif, puede vincular la hoja de estilo sobre http

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

pero si está utilizando https, la solicitud se bloqueará y aparecerá un error de contenido mixto, para usarlo en https, use secure_assetcomo

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

https://laravel.com/docs/5.1/helpers#method-secure-asset

— Sambhav Pandey
fuente

2

Solo se necesitan 2 corchetes, no 3.

— Radmation

¿Dónde coloco mi archivo css, js? ya sea el public/cssoresources/assets/css

— NaveenDA

10

Desde Laravel 5, la HTMLclase ya no se incluye por defecto.

Si está utilizando ayudantes de formulario o HTML, verá un error que indica que la clase 'Formulario' no se encuentra o la clase 'Html' no se encuentra. Los ayudantes de formulario y HTML han quedado obsoletos en Laravel 5.0; sin embargo, existen reemplazos impulsados por la comunidad, como los que mantiene el Colectivo Laravel.

Puede hacer uso de la siguiente línea para incluir sus archivos CSS o JS:

<link href="{{ URL::asset('css/base.css') }}" rel="stylesheet">
<link href="{{ URL::asset('js/project.js') }}" rel="script">

— Bono
fuente

2

Creo que esta respuesta debería estar más arriba porque parece ser la forma preferida, ya que la clase HTML está en desuso.

— Asimov

7

Actualización para laravel 5.4 ----

Todas las respuestas han usado la clase HTML para laravel, pero supongo que ahora se ha depreciado en laravel 5.4, así que coloque sus archivos css y js en public-> css / js y haga referencia a ellos en su html usando

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

— Eminem347
fuente

Esto funciona bien en Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css no es necesario

— Udhav Sarvaiya

5

Eso no es posible hermano, Laravel asume que todo está en una carpeta pública.

Entonces mi sugerencia es:

Vaya a la carpeta pública .
Cree una carpeta, preferiblemente llamada css .
Cree la carpeta para las vistas respectivas para organizar las cosas.
Coloque el css respectivo dentro de esas carpetas, eso sería más fácil para usted.

O

Si realmente insiste en poner css dentro de la carpeta de vistas, puede intentar crear un enlace simbólico (es mac, así que está bien, pero para Windows, esto solo funcionará para Vista, Server 2008 o superior) desde el directorio de su carpeta css al público. carpeta y puede usar {{HTML::style('your_view_folder/myStyle.css')}}dentro de sus archivos de vista, aquí hay un código para su conveniencia, en el código que publicó, póngalo antes de return View::make():

$css_file = 'myStyle.css';
$folder_name = 'your_view_folder';
$view_path = app_path() . '/views/' . $folder_name . '/' . $css_file;
$public_css_path = public_path() . '/' . $folder_name;
if(file_exists($public_css_path)) exec('rm -rf ' . $public_css_path);
exec('mkdir ' . $public_css_path);
exec('ln -s ' . $view_path .' ' . $public_css_path . '/' . $css_file);

Si realmente quieres intentar hacer tu idea, prueba esto:

<link rel="stylesheet" href="<?php echo app_path() . 'views/your_view_folder/myStyle.css'?>" type="text/css">

Pero no funcionará incluso si el directorio de archivos es correcto porque Laravel no lo hará por motivos de seguridad, Laravel te ama mucho.

— Bryan P
fuente

5

En mi opinión, la mejor opción para enrutar a css & js usa el siguiente código:

<link rel="stylesheet" type="text/css" href="{{ URL::to('route/to/css') }}">

Entonces, si tiene un archivo css llamado main.css dentro de la carpeta css en la carpeta pública, debería ser el siguiente:

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/main.css') }}">

— kqcreations
fuente

4

ponga su archivo css en una carpeta pública. (public / css / bootstrap-responsive.css) y<link href="./css/bootstrap-responsive.css" rel="stylesheet">

— huuthang
fuente

¡Impresionante, funciona! Pero, ¿hay alguna diferencia entre <link href="./css/bootstrap-responsive.css" rel="stylesheet">y<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

— Gregordy

4

Simplemente puede poner todos los archivos en su carpeta especificada en público como

public / css
public / js
public / images

Luego simplemente llame a los archivos como en html normal como
<link href="css/file.css" rel="stylesheet" type="text/css">

Funciona bien en cualquier versión de Laravel

— suzan
fuente

3

Copie el archivo css o js que desea incluir en la carpeta pública o puede guardarlos en las carpetas public / css o public / js.

P.ej. está usando el archivo style.css de la carpeta css en el directorio público, entonces puede usar

<link rel="stylesheet" href="{{ url() }}./css/style.css" type="text/css"/>

Pero en Laravel 5.2 tendrás que usar

<link rel="stylesheet" href="{{ url('/') }}./css/style.css" type="text/css"/>

y si desea incluir archivos javascript de la carpeta public / js, también es bastante simple

<script src="{{ url() }}./js/jquery.min.js"></script>

y en Laravel 5.2 tendrás que usar

<script src="{{ url('/') }}./js/jquery.min.js"></script>

la función url()es una función auxiliar de laravel que generará una URL totalmente calificada para la ruta dada.

— Akshay Khale
fuente

3

ponga su css en la carpeta pública, luego

agregue esto en su archivo de hoja

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

— Saengdaet
fuente

3

Utilizar {!! en nuevo laravel

{!! asset('js/app.min.js') !!}

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

— TARUN SHARMA
fuente

2

Para Laravel 5.4 y si está usando mix helper, use

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

— Gsub
fuente

2

Colóquelos en la publiccarpeta y llámelo en la vista con algo como href="{{ asset('public/css/style.css') }}". Tenga en cuenta que publicdebe incluirse cuando llame a los activos.

— Abaij
fuente

No es necesario indicar la carpeta "pública". Por ejemplo, esto funcionó para mí. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Tu ejemplo no funcionó.

— Isuru

2

Para aquellos que necesitan mantener js / css fuera de la carpeta pública por cualquier motivo, en Laravel moderno puede usar sub-vistas . Digamos que su estructura de vistas es

views
    view1.blade.php
    view1-css.blade.php
    view1-js1.blade.php
    view1-js2.blade.php

en view1agregar

@include('view1-css')
@include('view1-js1')
@include('view1-js2')

en views-js.blade.phparchivos envuelva su código js en<script> etiqueta

en views-css.blade.phpenvolver sus estilos en la <style>etiqueta

Eso le dirá a Laravel, y a su editor de código, que esos son de hecho jsy cssarchivos. Puede hacer lo mismo con HTML adicional, SVG y otras cosas que se pueden renderizar en el navegador

— Arthur Tarasov
fuente