Używasz CSS w widokach Laravel?

108

Właśnie zacząłem uczyć się Laravel i potrafię opanować podstawy kontrolera i routingu.

Mój system operacyjny to Mac OS X Lion i znajduje się na serwerze MAMP.

Mój kod z 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>";
});

To działa, widoki wyświetlają się idealnie, '' jednak '' to, co chcę zrobić, to dołączyć CSS do widoków, próbowałem dodać link do arkusza stylów w katalogu, ale strona wyświetlała go jako domyślną czcionkę przeglądarki nawet chociaż css był w HTML!

To jest index.php firm w folderze widoków:

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

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

Próbowałem użyć silnika szablonów Blade w moim innym folderze widoków (testowanie), aby wyświetlić CSS, ale znowu CSS nie wyświetlał się, mimo że był w folderze testowym!

Jak mogę przezwyciężyć ten problem i polepszyć się - kiedy powoli uczę się tej struktury.

php frameworks laravel avenas8808
źródło

Jakiej wersji Laravel używasz?

Czarny

5

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

vishalknishad

156

Umieść swoje zasoby w folderze publicznym

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

Nazwali to za pomocą Laravel

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

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

Fernando Montoya
źródło

2

Nie wywołuj CSS wewnątrz @section ani nic, jeśli używasz blade, działało dla mnie!

star18bit

3

Aby ta składnia działała, musisz używać ostrza. Jeśli nie używasz blade, musisz iść z: <? Php echo HTML :: style ('css / common.css');?>

Nicholas Kreidberg

6

Teraz jest inaczej w przypadku Laravel 5.0, w którym pakiet illuminate / html nie jest już domyślnie dołączany laracasts.com/series/laravel-5-fundamentals/episodes/10 po szczegóły

dangel

1

Jeśli to nie zadziała, oto co mi zadziałało: stackoverflow.com/questions/15232600/…

Dan Klos

1

Na mnie też nie działa. Błąd krytyczny: nie znaleziono klasy „HTML”

geoidesic

56

Umieść swoje zasoby w folderze publicznym

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

A potem nazwał to za pomocą 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

(LUB)

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

Główny programista
źródło

URL :: asset () jest wbudowany, podczas gdy HTML :: style () wymaga pakietu

omarjebari,

Czy możesz dodać do swojej odpowiedzi, gdzie wywołać ten kod {{ URL::asset('js/scrollTo.js'); }}? czy możesz podać przykład?

Ramesh Pareek

43

Twój plik css należy do folderu publicznego lub jego podfolderu.

np. jeśli umieścisz swój css

public/css/common.css

użyłbyś

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

W twoim widoku ostrza ...

Możesz też użyć klasy aktywów http://laravel.com/docs/views/assets ...

André Keller
źródło

Nie, to nie robi różnicy. Nie mam dostępu do niczego przez przeglądarkę zawartą w tych katalogach ...

dcolumbus

@dcolumbus Jeśli 404, który otrzymujesz, jest generowany przez Laravel (tj. nie jest to domyślny serwer), możesz nie mieć następującego wiersza w swoim .htaccess (zakładając, że używasz Apache): „RewriteCond% {REQUEST_FILENAME}! -fa". Linia ta powinna znajdować się nad linią zawierającą index.php i uniemożliwi obsługę żądań ścieżek istniejących w systemie plików przez system routingu Laravel. Jeśli otrzymany kod 404 nie jest generowany przez Laravel, musisz dodać „AllowOverride All” do konfiguracji Apache, aby przetworzyć plik .htaccess (zobacz dokumentację Apache, aby uzyskać więcej informacji).

tjbp

Powiedział, że chce umieścić pliki css w folderze widoku, a nie w folderze publicznym, asset () i HTML :: style / HTML :: script, wszystkie wskazują na katalog publiczny, laravel nie pozwala, aby cokolwiek w folderze App było dostępne dla spraw zewnętrznych ze względów bezpieczeństwa. Więc nawet jeśli istnieje index.php, czy nie, nie ma znaczenia, czego chce.

Bryan P

26

Możesz także napisać prosty tag linku tak jak zwykle, a następnie użyć attr href:

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

oczywiście musisz umieścić swój plik css w folderze public / css

Diego Castaño
źródło

@dcolumbus 404 może dlatego, że podając złą ścieżkę, spróbuj dodać prefiks / public /, domyślnie laravel ma prefiks / public / /public/css/common.css

david valentino

23

Możemy to zrobić w następujący sposób.

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

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

Przeszuka plik stylu w folderze publicznym Laravel, a następnie wyrenderuje go.

Ahmad Sharif
źródło

1

Fajny Ahmadzie, będzie dobrze, jeśli połączysz arkusz stylów z http <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet">, ale jeśli używasz httpswtedy żądanie zostanie zablokowane i pojawi się błąd dotyczący mieszanej zawartości. Aby użyć go przez https, musisz użyć na secure_assetprzykład <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset

Sambhav Pandey

Potrzebne są tylko 2 nawiasy - nie 3.

Oleg Abrazhaev

Jeśli używasz tego rozwiązania dla laravel 5, musisz zainstalować dostawcę LaravelCollective Forms & HTML. Zobacz: laravelcollective.com/docs/5.4/html, aby uzyskać instrukcje. Nie zapomnij uruchomić „aktualizacji kompozytora” po zaktualizowaniu pliku composer.json.

Asimov

15

Jak wspomniał Ahmad Sharif, możesz połączyć arkusz stylów http

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

ale jeśli używasz httpsnastępnie wniosek zostanie zablokowane, a mieszany błąd zawartość przyjdzie, aby używać go na https stosowanie secure_assetjak

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

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

Sambhav Pandey
źródło

2

Potrzebne są tylko 2 nawiasy - nie 3.

Radmation

Gdzie mogę umieścić mój plik CSS, JS? w dniu public/csslubresources/assets/css

NaveenDA

10

Od Laravel 5 HTMLklasa nie jest już uwzględniana domyślnie.

Jeśli używasz pomocników formularzy lub HTML, zostanie wyświetlony komunikat o błędzie z informacją, że nie znaleziono klasy „Form” lub nie znaleziono klasy „Html”. Pomocniki Form i HTML zostały przestarzałe w Laravel 5.0; istnieją jednak zamienniki kierowane przez społeczność, takie jak te utrzymywane przez kolektyw Laravel.

Możesz skorzystać z poniższego wiersza, aby dołączyć pliki CSS lub JS:

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

Bono
źródło

2

Myślę, że ta odpowiedź powinna być wyżej, ponieważ wydaje się, że jest to preferowany sposób, ponieważ klasa HTML jest przestarzała.

Asimov

7

Aktualizacja dla laravel 5.4 ----

Wszystkie odpowiedzi wykorzystywały klasę HTML dla laravel, ale wydaje mi się, że w laravel 5.4 została zdekapitowana, więc umieść swoje pliki css i js w public-> css / js I odwołaj się do nich w html za pomocą

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

Eminem347
źródło

To działa dobrze w Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css nie jest konieczne

Udhav Sarvaiya

5

To nie jest możliwe brachu, Laravel zakłada, że wszystko jest w folderze publicznym.

Więc moja sugestia jest taka:

Przejdź do folderu publicznego .
Utwórz folder, najlepiej o nazwie css .
Utwórz folder dla odpowiednich widoków, aby uporządkować rzeczy.
Umieść odpowiedni plik css w tych folderach, co byłoby dla Ciebie łatwiejsze.

Lub

Jeśli naprawdę nalegasz na umieszczenie css w folderze widoków, możesz spróbować utworzyć łącze Symlink (jesteś mac, więc jest w porządku, ale w systemie Windows będzie to działać tylko dla Vista, Server 2008 lub nowszych) z katalogu folderu css do publicznego i możesz użyć {{HTML::style('your_view_folder/myStyle.css')}}wewnątrz swoich plików widoku, oto kod dla Twojej wygody, w opublikowanym kodzie umieść go przed 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);

Jeśli naprawdę chcesz spróbować zrealizować swój pomysł, wypróbuj to:

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

Ale to nie zadziała, nawet jeśli katalog plików jest poprawny, ponieważ Laravel nie zrobi tego ze względów bezpieczeństwa, Laravel kocha cię tak bardzo.

Bryan P
źródło

5

Moim zdaniem najlepszą opcją przekierowania do css & js jest następujący kod:

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

Więc jeśli masz plik css o nazwie main.css w folderze css w folderze publicznym, powinien wyglądać tak:

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

kqcreations
źródło

4

umieść swój plik css w folderze publicznym. (public / css / bootstrap-responsive.css) i<link href="./css/bootstrap-responsive.css" rel="stylesheet">

huuthang
źródło

Świetnie, to działa! Ale czy jest jakaś różnica między <link href="./css/bootstrap-responsive.css" rel="stylesheet">i<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

Gregordy,

4

Możesz po prostu umieścić wszystkie pliki w określonym folderze w sposób publiczny, taki jak

public / css
public / js
public / images

Następnie po prostu wywołaj pliki tak, jak w normalnym html
<link href="css/file.css" rel="stylesheet" type="text/css">

Działa dobrze w każdej wersji Laravel

suzan
źródło

3

Skopiuj plik css lub js, który chcesz dołączyć, do folderu publicznego lub możesz chcieć przechowywać je w folderach public / css lub public / js.

Na przykład. używasz pliku style.css z folderu css w katalogu publicznym, możesz użyć

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

Ale w Laravel 5.2 będziesz musiał użyć

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

a jeśli chcesz dołączyć pliki javascript z folderu public / js, jest to również dość proste

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

aw Laravel 5.2 będziesz musiał użyć

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

funkcja url()jest funkcją pomocniczą programu laravel, która wygeneruje w pełni kwalifikowany adres URL do podanej ścieżki.

Akshay Khale
źródło

3

umieść swój plik css w folderze publicznym

dodaj to w swoim pliku ostrza

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

Saengdaet
źródło

3

Posługiwać się {!! w nowym laravelu

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

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

TARUN SHARMA
źródło

2

W przypadku Laravel 5.4 i jeśli używasz pomocnika mieszania, użyj

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

Gsub
źródło

2

Umieść je w publicfolderze i nazwij to w widoku z czymś w rodzaju href="{{ asset('public/css/style.css') }}". Pamiętaj, że publicpodczas wywoływania zasobów należy uwzględnić.

Abaij
źródło

Nie ma potrzeby określania folderu „publiczny”. Na przykład to zadziałało dla mnie. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Twój przykład nie zadziałał.

Isuru

2

Dla tych, którzy chcą trzymać js / css poza folderem publicznym z jakichkolwiek powodów, w nowoczesnym Laravelu możesz użyć widoków podrzędnych . Powiedz, że masz strukturę poglądów

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

w view1dodatku

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

w views-js.blade.phpplikach zawiń kod js w <script>znacznik

w views-css.blade.phpowinąć style w <style>tagu

Że powie laravel i edytor kodu, że są to w rzeczywistości jsi cssplików. Możesz zrobić to samo z dodatkowymi plikami HTML, SVG i innymi rzeczami, które można renderować w przeglądarce

Arthur Tarasov
źródło

Używasz CSS w widokach Laravel?

Odpowiedzi: