Verwenden von CSS in Laravel-Ansichten?

108

Ich habe gerade angefangen, Laravel zu lernen und kann die Grundlagen eines Controllers und Routings erlernen.

Mein Betriebssystem ist Mac OS X Lion und befindet sich auf einem MAMP-Server.

Mein Code von 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>";
});

Das funktioniert, die Ansichten werden perfekt angezeigt. Ich möchte jedoch versuchen, CSS in die Ansichten aufzunehmen. Ich habe versucht, einen Link zu einem Stylesheet im Verzeichnis hinzuzufügen, aber die Seite hat ihn sogar als Standardschriftart des Browsers angezeigt obwohl das CSS im HTML war!

Dies ist index.php von Unternehmen im Ansichtsordner:

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

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

Ich habe versucht, die Blade-Vorlagen-Engine in meinem anderen Ansichtsordner (Testen) zum Anzeigen von CSS zu verwenden, aber auch hier wurde das CSS nicht angezeigt, obwohl es sich im Testordner befindet!

Wie kann ich dieses Problem überwinden und besser werden - während ich langsam diesen Rahmen lerne?

php frameworks laravel avenas8808
quelle

Welche Laravel-Version verwenden Sie überhaupt?

Schwarz

5

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

Vishalknishad

156

Legen Sie Ihre Assets in den öffentlichen Ordner

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

Und sie nannten es mit Laravel

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

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

Fernando Montoya
quelle

2

Rufen Sie kein CSS in @section an oder sonst etwas, wenn Sie Blade verwenden, hat das für mich funktioniert!

star18bit

3

Sie müssen Blade verwenden, damit diese Syntax funktioniert. Wenn Sie Blade nicht verwenden, müssen Sie Folgendes tun: <? Php echo HTML :: style ('css / common.css');?>

Nicholas Kreidberg

6

Dies ist jetzt anders für Laravel 5.0, wo das Illuminate / HTML-Paket standardmäßig nicht mehr enthalten ist. Laracasts.com/series/laravel-5-fundamentals/episodes/10 für Details

Dangel

1

Wenn dies bei Ihnen nicht funktioniert, funktioniert Folgendes

Dan Klos

1

Funktioniert auch bei mir nicht. Schwerwiegender Fehler: Klasse 'HTML' nicht gefunden

geoidesic

56

Legen Sie Ihre Assets in den öffentlichen Ordner

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

Und dann nannte es mit 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

(ODER)

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

Leitender Entwickler
quelle

URL :: asset () ist integriert, während HTML :: style () ein Paket erfordert

omarjebari

Können Sie Ihrer Antwort bitte hinzufügen, wo Sie diesen Code aufrufen können {{ URL::asset('js/scrollTo.js'); }}? Kannst du ein Beispiel geben?

Ramesh Pareek

43

Ihre CSS-Datei gehört in den öffentlichen Ordner oder einen Unterordner davon.

zB wenn du dein CSS reinlegst

public/css/common.css

du würdest verwenden

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

In Ihrer Klingenansicht ...

Sie können auch die Asset-Klasse http://laravel.com/docs/views/assets verwenden ...

André Keller
quelle

Nein, das macht keinen Unterschied. Ich kann über den in diesen Verzeichnissen enthaltenen Browser auf nichts zugreifen ...

dcolumbus

@dcolumbus Wenn der 404, den Sie empfangen, von Laravel generiert wird (dh nicht der Server-Standard), fehlt möglicherweise die folgende Zeile in Ihrem .htaccess (vorausgesetzt, Sie verwenden Apache): "RewriteCond% {REQUEST_FILENAME}! -f ". Diese Zeile sollte über der Zeile mit index.php liegen und verhindert, dass Anforderungen an Pfade, die im Dateisystem vorhanden sind, vom Routing-System von Laravel verarbeitet werden. Wenn der empfangene 404 nicht von Laravel generiert wird, müssen Sie Ihrer Apache-Konfiguration "AllowOverride All" hinzufügen, damit der .htaccess verarbeitet werden kann (weitere Informationen finden Sie in den Apache-Dokumenten).

tjbp

Er sagte, er möchte die CSS-Dateien im Ansichtsordner ablegen, nicht im öffentlichen Ordner, im Asset () und im HTML :: style / HTML :: -Skript, die alle auf das öffentliche Verzeichnis verweisen. Laravel lässt nichts im App-Ordner zu Zugriff von außen aus Sicherheitsgründen. Selbst wenn es index.php gibt oder nicht, spielt es keine Rolle, was er will.

Bryan P

26

Sie können auch ein einfaches Link-Tag schreiben, wie Sie es normalerweise tun würden, und dann auf dem href attr verwenden:

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

Natürlich müssen Sie Ihre CSS-Datei unter public / css ablegen

Diego Castaño
quelle

@dcolumbus 404 Vielleicht weil falscher Pfad, versuchen Sie, Präfix / public / hinzuzufügen, Laravel Standard haben Präfix / public / /public/css/common.css

Valentino

23

Wir können dies auf folgende Weise tun.

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

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

Es wird die Style-Datei im öffentlichen Ordner von Laravel durchsuchen und dann rendern.

Ahmad Sharif
quelle

1

Cool Ahmad, es wird gut funktionieren http , wenn Sie ein Stylesheet über <link href = "{{{asset ('/ css / style.css')}}" rel = "stylesheet"> verlinken, aber wenn Sie es verwenden, httpsdann das Die Anfrage wird blockiert und ein gemischter Inhaltsfehler wird auftreten. secure_assetUm sie über https zu verwenden, müssen Sie Folgendes verwenden: <link href = "{{{Secure_asset ('/ css / style.css')}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset

Sambhav Pandey

Es werden nur 2 Klammern benötigt - nicht 3.

Oleg Abrazhaev

Wenn Sie diese Lösung für Laravel 5 verwenden, müssen Sie den LaravelCollective Forms & HTML-Anbieter installieren. Anweisungen finden Sie unter: laravelcollective.com/docs/5.4/html . Vergessen Sie nicht, "Composer Update" auszuführen, nachdem Sie composer.json aktualisiert haben.

Asimov

15

Wie Ahmad Sharif erwähnt hat, können Sie Stylesheet über verlinken http

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

aber wenn Sie verwenden, httpswird die Anfrage blockiert und ein gemischter Inhaltsfehler wird auftreten, um es über https zu verwenden, verwenden Sie secure_assetwie

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

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

Sambhav Pandey
quelle

2

Es werden nur 2 Klammern benötigt - nicht 3.

Radmation

Wo platziere ich meine CSS, JS-Datei? entweder am public/cssoderresources/assets/css

NaveenDA

10

Seit Laravel 5 ist die HTMLKlasse standardmäßig nicht mehr enthalten.

Wenn Sie Formular- oder HTML-Helfer verwenden, wird ein Fehler angezeigt, der besagt, dass die Klasse 'Form' nicht gefunden oder die Klasse 'Html' nicht gefunden wurde. Die Formular- und HTML-Helfer sind in Laravel 5.0 veraltet. Es gibt jedoch Community-gesteuerte Ersetzungen, wie sie vom Laravel-Kollektiv unterhalten werden.

Sie können die folgende Zeile verwenden, um Ihre CSS- oder JS-Dateien einzuschließen:

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

Bono
quelle

2

Ich denke, diese Antwort sollte höher sein, da dies der bevorzugte Weg zu sein scheint, da die HTML-Klasse veraltet ist.

Asimov

7

Update für Laravel 5.4 ----

Alle Antworten haben die HTML-Klasse für Laravel verwendet, aber ich denke, sie wurde jetzt in Laravel 5.4 abgeschrieben. Legen Sie also Ihre CSS- und JS-Dateien in public-> CSS / JS ab und verweisen Sie sie in Ihrem HTML-Code mit

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

Eminem347
quelle

Dies funktioniert gut in Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css nicht erforderlich

Udhav Sarvaiya

5

Das ist nicht möglich, Bruder, Laravel geht davon aus, dass sich alles im öffentlichen Ordner befindet.

Mein Vorschlag lautet also:

Gehen Sie zum öffentlichen Ordner.
Erstellen Sie einen Ordner mit dem Namen css .
Erstellen Sie den Ordner für die jeweiligen Ansichten, um die Dinge zu organisieren.
Legen Sie das entsprechende CSS in diese Ordner, das wäre für Sie einfacher.

Oder

Wenn Sie wirklich darauf bestehen, CSS in den Ordner "Ansichten" einzufügen, können Sie versuchen, Symlink (Sie sind ein Mac, also ist es in Ordnung, aber für Windows funktioniert dies nur für Vista, Server 2008 oder höher) aus Ihrem CSS-Ordnerverzeichnis für die Öffentlichkeit zu erstellen Ordner und Sie können {{HTML::style('your_view_folder/myStyle.css')}}innerhalb Ihrer Ansichtsdateien verwenden, hier ist ein Code für Ihre Bequemlichkeit, in dem Code, den Sie gepostet haben, setzen Sie diese vor 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);

Wenn Sie wirklich versuchen möchten, Ihre Idee zu verwirklichen, versuchen Sie Folgendes:

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

Aber es wird nicht funktionieren, selbst wenn das Dateiverzeichnis korrekt ist, da Laravel dies aus Sicherheitsgründen nicht tut. Laravel liebt Sie so sehr.

Bryan P.
quelle

5

Meiner Meinung nach ist die beste Option, um zu CSS & JS zu routen, der folgende Code:

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

Wenn Sie also eine CSS-Datei namens main.css im CSS-Ordner im öffentlichen Ordner haben, sollte dies die folgende sein:

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

kqcreations
quelle

4

Legen Sie Ihre CSS-Datei in einem öffentlichen Ordner ab. (public / css / bootstrap-responsive.css) und<link href="./css/bootstrap-responsive.css" rel="stylesheet">

Huuthang
quelle

Super, es funktioniert! Aber gibt es einen Unterschied zwischen <link href="./css/bootstrap-responsive.css" rel="stylesheet">und<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

Gregordy

4

Sie können einfach alle Dateien in dem angegebenen Ordner öffentlich wie ablegen

public / css
public / js
public / images

Dann rufe einfach die Dateien wie in normalem HTML wie auf
<link href="css/file.css" rel="stylesheet" type="text/css">

Es funktioniert gut in jeder Version von Laravel

Suzan
quelle

3

Kopieren Sie die CSS- oder JS-Datei, die Sie einschließen möchten, in einen öffentlichen Ordner, oder speichern Sie diese möglicherweise in öffentlichen / CSS- oder öffentlichen / JS-Ordnern.

Z.B. Sie verwenden die Datei style.css aus dem CSS-Ordner im öffentlichen Verzeichnis, die Sie dann verwenden können

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

Aber in Laravel 5.2 müssen Sie verwenden

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

und wenn Sie Javascript-Dateien aus dem Ordner public / js einfügen möchten, ist dies ebenfalls recht einfach

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

und in Laravel 5.2 müssen Sie verwenden

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

Die Funktion url()ist eine Laravel-Hilfsfunktion, die eine vollständig qualifizierte URL zu einem bestimmten Pfad generiert.

Akshay Khale
quelle

3

Legen Sie dann Ihr CSS in einen öffentlichen Ordner

Fügen Sie dies in Ihre Blade-Datei ein

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

Saengdaet
quelle

3

Verwenden {!! in neuem Laravel

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

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

TARUN SHARMA
quelle

2

Verwenden Sie für Laravel 5.4 und wenn Sie Mix Helper verwenden

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

Gsub
quelle

2

Legen Sie sie in einen publicOrdner und rufen Sie sie in der Ansicht mit so etwas wie auf href="{{ asset('public/css/style.css') }}". Beachten Sie, dass publicdies beim Aufrufen der Assets berücksichtigt werden sollte.

Abaij
quelle

Es ist nicht erforderlich, den Ordner "public" anzugeben. Das hat zum Beispiel bei mir funktioniert. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Ihr Beispiel hat nicht funktioniert.

Isuru

2

Für diejenigen , die js / css aus öffentlichen Ordner für welchen Gründen auch immer, in der modernen Laravel Sie verwenden können , halten müssen Unteransichten . Angenommen, Ihre Ansichtsstruktur ist

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

in view1add

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

in views-js.blade.phpDateien wickeln Sie Ihren js-Code ein<script> Tag ein

in views-css.blade.phpwickeln Sie Ihre Stile in <style>Tag

Das wird sagen Laravel und Code - Editor, dass die sind in der Tat jsund cssDateien. Sie können dasselbe mit zusätzlichem HTML, SVGs und anderen Dingen tun, die vom Browser gerendert werden können

Arthur Tarasov
quelle

Verwenden von CSS in Laravel-Ansichten?

Antworten: