Usando CSS nelle viste Laravel?

108

Ho appena iniziato a imparare Laravel e posso fare le basi di controller e routing.

Il mio sistema operativo è Mac OS X Lion ed è su un server MAMP.

Il mio codice da routes.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>";
});

Funziona, le viste vengono visualizzate perfettamente, '' tuttavia '' quello che voglio provare e fare è includere CSS nelle viste, ho provato ad aggiungere un collegamento a un foglio di stile all'interno della directory ma la pagina lo visualizzava anche come carattere predefinito del browser sebbene il css fosse nell'HTML!

Questo è index.php dalle aziende all'interno della cartella delle viste:

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

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

Ho provato a utilizzare il motore del modello Blade nella mia cartella di altre viste (test) per visualizzare CSS, ma ancora una volta il CSS non è stato visualizzato nonostante fosse nella cartella di test!

Come posso superare questo problema e migliorare, mentre sto lentamente imparando questa struttura.

php frameworks laravel

— avenas8808
fonte

Quale versione di laravel stai usando?

— Nero

5

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

— vishalknishad

156

Metti le tue risorse nella cartella pubblica

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

E lo chiamavano usando Laravel

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

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

— Fernando Montoya
fonte

2

Non chiamare CSS all'interno di @section o altro, se usi blade, ha funzionato per me!

— star18bit

3

Devi usare blade affinché quella sintassi funzioni. Se non stai usando blade allora dovresti andare con: <? Php echo HTML :: style ('css / common.css');?>

— Nicholas Kreidberg

6

Questo è diverso ora per Laravel 5.0 dove il pacchetto illuminate / html non è più incluso di default laracasts.com/series/laravel-5-fundamentals/episodes/10 per i dettagli

— dangel

1

Se questo non funziona per te, ecco cosa ha funzionato per me: stackoverflow.com/questions/15232600/…

— Dan Klos

1

Non funziona neanche per me. Errore

— irreversibile

56

Metti le tue risorse nella cartella pubblica

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

E poi lo ha chiamato 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

— Sviluppatore principale
fonte

URL :: asset () è integrato mentre HTML :: style () richiede un pacchetto

— omarjebari

Puoi aggiungere alla tua risposta dove chiamare questo codice {{ URL::asset('js/scrollTo.js'); }}? Puoi fare un esempio?

— Ramesh Pareek,

43

il file css appartiene alla cartella pubblica o a una sua sottocartella.

se metti il tuo css in

public/css/common.css

useresti

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

Nella tua vista blade ...

Oppure puoi anche usare la classe Asset http://laravel.com/docs/views/assets ...

— André Keller
fonte

Nah, questo non fa differenza. Non riesco ad accedere a nulla tramite il browser contenuto in quelle directory ...

— dcolumbus

@dcolumbus Se il 404 che stai ricevendo è generato da Laravel (cioè non il server predefinito), allora potresti perdere la seguente riga nel tuo .htaccess (supponendo che tu stia usando Apache): "RewriteCond% {REQUEST_FILENAME}! -f". Quella riga dovrebbe andare sopra quella con index.php e impedirà che le richieste ai percorsi che esistono nel filesystem vengano gestite dal sistema di routing di Laravel. Se il 404 ricevuto non è generato da Laravel, è necessario aggiungere "AllowOverride All" alla configurazione di Apache affinché il file .htaccess venga elaborato (vedere la documentazione di Apache per maggiori informazioni).

— tjbp

Ha detto che vuole mettere i file css all'interno della cartella di visualizzazione, non la cartella pubblica, asset () e HTML :: style / HTML :: script tutti i punti alla directory pubblica, laravel non consente a nulla all'interno della cartella App di essere accessibile da soggetti esterni per motivi di sicurezza. Quindi anche se c'è index.php o meno non importa in quello che vuole.

— Bryan P

26

Puoi anche scrivere un semplice tag di collegamento come faresti normalmente e poi su href attr usare:

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

ovviamente devi mettere il tuo file css sotto public / css

— Diego Castaño
fonte

@dcolumbus 404 forse perché dando un percorso sbagliato, prova ad aggiungere prefisso / public /, il default di laravel ha prefisso / public / /public/css/common.css

— david valentino

23

Possiamo farlo nel modo seguente.

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

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

Cercherà il file di stile nella cartella pubblica di Laravel e quindi lo visualizzerà.

— Ahmad Sharif
fonte

1

Fantastico Ahmad, funzionerà bene se colleghi il foglio di stile su http <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet"> ma se stai usando httpsil la richiesta verrà bloccata e verrà visualizzato un errore di contenuto misto, per usarlo su https devi usare secure_assetcome <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset

— Sambhav Pandey

Sono necessarie solo 2 parentesi - non 3.

— Oleg Abrazhaev

Se usi questa soluzione per laravel 5 devi installare LaravelCollective Forms & HTML provider. Vedi: laravelcollective.com/docs/5.4/html per le istruzioni. Non dimenticare di eseguire "composer update" dopo aver aggiornato composer.json.

— Asimov

15

Come ha detto Ahmad Sharif, puoi collegare il foglio di stile http

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

ma se stai usando, httpsla richiesta verrà bloccata e verrà visualizzato un errore di contenuto misto, per usarlo su https usa secure_assetcome

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

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

— Sambhav Pandey
fonte

2

Sono necessarie solo 2 parentesi - non 3.

— Radmation

Dove inserisco il mio file css, js? o su public/cssoresources/assets/css

— NaveenDA

10

Da Laravel 5 la HTMLclasse non è più inclusa di default.

Se stai utilizzando form o helper HTML, vedrai un errore indicante la classe "Form" non trovata o la classe "Html" non trovata. Gli helper Form e HTML sono stati deprecati in Laravel 5.0; tuttavia, ci sono sostituzioni guidate dalla comunità come quelle mantenute dal Collettivo Laravel.

Puoi utilizzare la seguente riga per includere i tuoi file CSS o JS:

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

— Bono
fonte

2

Penso che questa risposta dovrebbe essere più in alto perché questo sembra essere il modo preferito, poiché la classe HTML è deprecata.

— Asimov

7

Aggiornamento per laravel 5.4 ----

Tutte le risposte hanno utilizzato la classe HTML per laravel ma immagino che ora sia stata deprezzata in laravel 5.4, quindi metti i tuoi file css e js in public-> css / js e fai riferimento a loro nel tuo html usando

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

— Eminem347
fonte

Funziona bene in Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css non necessario

— Udhav Sarvaiya

5

Non è possibile fratello, Laravel presume che tutto sia nella cartella pubblica.

Quindi il mio suggerimento è:

Vai alla cartella pubblica .
Crea una cartella, preferibilmente denominata css .
Crea la cartella per le rispettive viste per organizzare le cose.
Metti il rispettivo css all'interno di quelle cartelle, sarebbe più facile per te.

O

Se insisti davvero a mettere css all'interno della cartella delle viste, potresti provare a creare Symlink (sei mac quindi va bene, ma per Windows, funzionerà solo per Vista, Server 2008 o versioni successive) dalla directory della cartella css al pubblico cartella e puoi usare {{HTML::style('your_view_folder/myStyle.css')}}all'interno dei tuoi file di visualizzazione, ecco un codice per tua comodità, nel codice che hai pubblicato, mettili prima di 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);

Se vuoi davvero provare a realizzare la tua idea, prova questo:

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

Ma non funzionerà anche se la directory dei file è corretta perché Laravel non lo farà per motivi di sicurezza, Laravel ti ama così tanto.

— Bryan P
fonte

5

A mio parere l'opzione migliore per instradare verso css e js usa il seguente codice:

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

Quindi, se hai un file css chiamato main.css all'interno della cartella css nella cartella pubblica, dovrebbe essere il seguente:

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

— kqcreations
fonte

4

metti il tuo file css nella cartella pubblica. (public / css / bootstrap-responsive.css) e<link href="./css/bootstrap-responsive.css" rel="stylesheet">

— huuthang
fonte

Fantastico, funziona! Ma c'è qualche differenza tra <link href="./css/bootstrap-responsive.css" rel="stylesheet">e<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

— Gregordy

4

Puoi semplicemente mettere tutti i file nella cartella specificata in pubblico come

public / css
public / js
public / images

Quindi chiama i file come nel normale html
<link href="css/file.css" rel="stylesheet" type="text/css">

Funziona perfettamente in qualsiasi versione di Laravel

— suzan
fonte

3

Copiare il file css o js che si desidera includere nella cartella pubblica o archiviarli nelle cartelle public / css o public / js.

Per esempio. stai usando il file style.css dalla cartella css nella directory pubblica, quindi puoi usare

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

Ma in Laravel 5.2 dovrai usare

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

e se vuoi includere file javascript dalla cartella public / js, è anche abbastanza semplice

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

e in Laravel 5.2 dovrai usare

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

la funzione url()è una funzione di aiuto di laravel che genererà un URL completo per un dato percorso.

— Akshay Khale
fonte

3

metti il tuo css nella cartella pubblica, quindi

aggiungilo nel tuo file blade

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

— Saengdaet
fonte

3

Uso {!! in nuovo laravel

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

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

— TARUN SHARMA
fonte

2

Per Laravel 5.4 e se stai usando mix helper, usa

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

— gsub
fonte

2

Mettili nella publiccartella e chiamalo nella vista con qualcosa di simile href="{{ asset('public/css/style.css') }}". Nota che publicdovrebbe essere incluso quando chiami gli asset.

— Abaij
fonte

Non è necessario indicare la cartella "pubblica". Ad esempio, questo ha funzionato per me. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Il tuo esempio non ha funzionato.

— Isuru

2

Per coloro che hanno bisogno di mantenere js / css fuori dalla cartella pubblica per qualsiasi motivo, nel moderno Laravel è possibile utilizzare le viste secondarie . Supponiamo che la struttura delle tue visualizzazioni sia

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

in view1aggiunta

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

nei views-js.blade.phpfile racchiudi il tuo codice js nel <script>tag

in views-css.blade.phpavvolgere i vostri stili di <style>tag

Questo dirà a Laravel e al tuo editor di codice che quelli sono in effetti jse cssfile. Puoi fare lo stesso con HTML aggiuntivo, SVG e altre cose che possono essere renderizzate tramite browser

— Arthur Tarasov
fonte