Menggunakan CSS dalam tampilan Laravel?

108

Saya baru saja mulai mempelajari Laravel, dan dapat melakukan dasar-dasar pengontrol dan perutean.

OS saya adalah Mac OS X Lion, dan ada di server MAMP.

Kode saya dari 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>";
});

Itu berfungsi, tampilan ditampilkan dengan sempurna, '' namun '' yang ingin saya coba dan lakukan adalah menyertakan CSS dalam tampilan, saya mencoba menambahkan tautan ke stylesheet di dalam direktori tetapi halaman menampilkannya sebagai font browser default bahkan meskipun cssnya ada di HTML!

Ini adalah index.php dari bisnis dalam folder views:

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

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

Saya mencoba menggunakan mesin template Blade di folder views saya yang lain (pengujian) untuk menampilkan CSS tetapi sekali lagi CSS tidak muncul meskipun berada di folder pengujian!

Bagaimana saya bisa mengatasi masalah ini, dan menjadi lebih baik - karena saya perlahan-lahan mempelajari kerangka kerja ini.

php frameworks laravel avenas8808
sumber

Versi laravel apa yang Anda gunakan?

Hitam

5

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

vishalknishad

156

Taruh aset Anda di folder publik

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

Dan mereka menyebutnya menggunakan Laravel

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

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

Fernando Montoya
sumber

2

Jangan panggil CSS di dalam @section atau apa pun, jika Anda menggunakan blade, berhasil untuk saya!

star18bit

3

Anda harus menggunakan blade agar sintaks itu berfungsi. Jika Anda tidak menggunakan blade, maka Anda harus menggunakan: <? Php echo HTML :: style ('css / common.css');?>

Nicholas Kreidberg

6

Ini berbeda sekarang untuk Laravel 5.0 di mana paket illuminate / html tidak lagi disertakan secara default laracasts.com/series/laravel-5-fundamentals/episodes/10 untuk detailnya

dangel

1

Jika ini tidak berhasil untuk Anda, inilah yang berhasil untuk saya: stackoverflow.com/questions/15232600/…

Dan Klos

1

Juga tidak berhasil untuk saya. Kesalahan Fatal: Kelas 'HTML' tidak ditemukan

geoidesic

56

Taruh aset Anda di folder publik

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

Dan kemudian menyebutnya menggunakan 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

(ATAU)

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

Pengembang Utama
sumber

URL :: asset () sudah ada di

dalamnya

Bisakah Anda menambahkan jawaban Anda di mana memanggil kode ini {{ URL::asset('js/scrollTo.js'); }}? dapatkah anda memberi contoh?

Ramesh Pareek

43

file css Anda termasuk dalam folder publik atau subfoldernya.

fe jika Anda memasukkan css Anda

public/css/common.css

Anda akan menggunakan

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

Dalam pandangan pedangmu ...

Atau Anda juga bisa menggunakan kelas Asset http://laravel.com/docs/views/assets ...

André Keller
sumber

Nah, ini tidak membuat perbedaan. Saya tidak dapat mengakses apa pun melalui browser yang ada di direktori tersebut ...

dcolumbus

@dcolumbus Jika 404 yang Anda terima dihasilkan oleh Laravel (bukan server default), maka Anda mungkin kehilangan baris berikut dalam .htaccess Anda (dengan asumsi Anda menggunakan Apache): "RewriteCond% {REQUEST_FILENAME}! -f ". Baris itu harus berada di atas baris dengan index.php di dalamnya, dan akan mencegah permintaan ke jalur yang ada di sistem file ditangani oleh sistem perutean Laravel. Jika 404 yang diterima tidak dibuat oleh Laravel, Anda perlu menambahkan "AllowOverride All" ke konfigurasi Apache Anda agar .htaccess dapat diproses (lihat dokumen Apache untuk info lebih lanjut).

tjbp

Dia bilang dia ingin meletakkan file css di dalam folder view, bukan folder publik, asset () dan HTML :: style / HTML :: script semua mengarah ke direktori publik, laravel tidak mengizinkan apapun di dalam folder App untuk ditempatkan. diakses oleh hal-hal luar untuk tujuan keamanan. Jadi kalaupun ada index.php atau tidak tidak masalah apa yang dia inginkan.

Bryan P

26

Anda juga dapat menulis tag tautan sederhana seperti yang biasa Anda lakukan dan kemudian menggunakan atribut href:

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

tentu saja Anda perlu meletakkan file css Anda di bawah public / css

Diego Castaño
sumber

@dcolumbus 404 mungkin karena memberikan path yang salah, coba tambahkan prefix / public /, default laravel ada prefix / public / /public/css/common.css

david valentino

23

Kita bisa melakukannya dengan cara berikut.

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

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

Ini akan mencari file gaya di folder publik Laravel dan kemudian akan merendernya.

Ahmad Sharif
sumber

1

Cool Ahmad, akan bekerja dengan baik jika Anda menautkan style-sheet ke http <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet"> tetapi jika Anda menggunakan httpsmaka permintaan akan diblokir dan kesalahan konten campuran akan datang, untuk menggunakannya melalui https Anda harus menggunakan secure_assetseperti <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset

Sambhav Pandey

Hanya 2 tanda kurung yang dibutuhkan - bukan 3.

Oleg Abrazhaev

Jika Anda menggunakan solusi ini untuk laravel 5 Anda perlu menginstal penyedia LaravelCollective Forms & HTML. Lihat: laravelcollective.com/docs/5.4/html untuk instruksi. Jangan lupa untuk menjalankan "pembaruan komposer" setelah Anda memperbarui composer.json.

Asimov

15

Seperti yang disebutkan Ahmad Sharif, Anda dapat menautkan stylesheet ke atas http

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

tetapi jika Anda menggunakan httpsmaka permintaan akan diblokir dan kesalahan konten campuran akan datang, untuk menggunakannya melalui https, gunakan secure_assetseperti

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

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

Sambhav Pandey
sumber

2

Hanya dibutuhkan 2 tanda kurung - bukan 3.

Radmation

Di mana saya menempatkan file css, js saya? baik pada public/cssatauresources/assets/css

NaveenDA

10

Sejak Laravel 5 HTMLkelas tidak disertakan secara default lagi.

Jika Anda menggunakan pembantu Formulir atau HTML, Anda akan melihat kesalahan yang menyatakan kelas 'Formulir' tidak ditemukan atau kelas 'Html' tidak ditemukan. Pembantu Formulir dan HTML sudah tidak digunakan lagi di Laravel 5.0; namun, ada penggantian berbasis komunitas seperti yang dikelola oleh Laravel Collective.

Anda dapat menggunakan baris berikut untuk memasukkan file CSS atau JS Anda:

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

Bono
sumber

2

Saya pikir jawaban ini harus lebih tinggi karena ini tampaknya menjadi cara yang disukai, karena kelas HTML sudah tidak digunakan lagi.

Asimov

7

Pembaruan untuk laravel 5.4 ----

Semua jawaban telah menggunakan kelas HTML untuk laravel tetapi saya kira itu telah disusutkan sekarang di laravel 5.4, jadi Letakkan file css dan js Anda di publik-> css / js Dan rujuk mereka di html Anda menggunakan

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

Eminem347
sumber

Ini berfungsi dengan baik di Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css tidak diperlukan

Udhav Sarvaiya

5

Itu tidak mungkin bro, Laravel menganggap semuanya ada di folder publik.

Jadi saran saya adalah:

Buka folder publik .
Buat folder, lebih disukai bernama css .
Buat folder untuk masing-masing tampilan untuk mengatur semuanya.
Letakkan masing-masing css di dalam folder tersebut, itu akan memudahkan Anda.

Atau

Jika Anda benar-benar bersikeras untuk meletakkan css di dalam folder views, Anda dapat mencoba membuat Symlink (Anda mac jadi tidak apa-apa, tetapi untuk windows, ini hanya akan bekerja untuk Vista, Server 2008 atau lebih tinggi) dari direktori folder css Anda ke publik folder dan Anda dapat menggunakan {{HTML::style('your_view_folder/myStyle.css')}}di dalam file tampilan Anda, berikut adalah kode untuk kenyamanan Anda, dalam kode yang Anda posting, letakkan ini sebelum 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);

Jika Anda benar-benar ingin mencoba mewujudkan ide Anda, coba ini:

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

Tetapi itu tidak akan berfungsi bahkan jika direktori file benar karena Laravel tidak akan melakukannya untuk tujuan keamanan, Laravel sangat mencintai Anda.

Bryan P.
sumber

5

Menurut pendapat saya, opsi terbaik untuk merutekan ke css & js menggunakan kode berikut:

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

Jadi jika Anda memiliki file css bernama main.css di dalam folder css di folder publik itu harus sebagai berikut:

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

kqcreations
sumber

4

letakkan File css Anda di folder publik. (public / css / bootstrap-responsive.css) dan<link href="./css/bootstrap-responsive.css" rel="stylesheet">

huuthang
sumber

Luar biasa, berhasil! Tapi, apakah ada perbedaan antara <link href="./css/bootstrap-responsive.css" rel="stylesheet">dan<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

Gregordy

4

Anda cukup meletakkan semua file di folder yang ditentukan di publik seperti

publik / css
publik / js
publik / gambar

Kemudian panggil saja file seperti pada html biasa seperti
<link href="css/file.css" rel="stylesheet" type="text/css">

Ini berfungsi dengan baik di semua versi Laravel

suzan
sumber

3

Salin file css atau js yang ingin Anda masukkan, ke folder publik atau Anda mungkin ingin menyimpannya di folder publik / css atau publik / js.

Misalnya. Anda menggunakan file style.css dari folder css di direktori publik maka Anda dapat menggunakan

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

Tetapi di Laravel 5.2 Anda harus menggunakan

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

dan jika Anda ingin memasukkan file javascript dari folder publik / js, itu juga cukup sederhana

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

dan di Laravel 5.2 Anda harus menggunakannya

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

fungsinya url()adalah fungsi pembantu laravel yang akan menghasilkan URL yang sepenuhnya memenuhi syarat ke jalur tertentu.

Akshay Khale
sumber

3

letakkan css Anda di folder publik, lalu

tambahkan ini di file blade Anda

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

Saengdaet
sumber

3

Gunakan {!! di laravel baru

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

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

TARUN SHARMA
sumber

2

Untuk Laravel 5.4 dan jika Anda menggunakan mix helper, gunakan

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

Gsub
sumber

2

Letakkan di publicfolder dan beri nama dalam tampilan dengan sesuatu seperti href="{{ asset('public/css/style.css') }}". Perhatikan bahwa publicharus disertakan saat Anda memanggil aset.

Abaij
sumber

Tidak perlu menyebutkan folder "publik". Misalnya, ini berhasil untuk saya. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Teladan Anda tidak berhasil.

Isuru

2

Bagi mereka yang perlu menyimpan js / css dari folder publik karena alasan apapun, di Laravel modern Anda dapat menggunakan sub-view . Katakanlah struktur pandangan Anda adalah

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

di view1tambahkan

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

dalam views-js.blade.phpfile, bungkus kode js Anda dengan <script>tag

dalam views-css.blade.phpmembungkus gaya Anda dalam <style>tag

Itu akan memberi tahu Laravel, dan editor kode Anda, bahwa itu adalah fakta jsdan cssfile. Anda dapat melakukan hal yang sama dengan HTML tambahan, SVG, dan hal-hal lain yang dapat dirender oleh browser

Arthur Tarasov
sumber

Menggunakan CSS dalam tampilan Laravel?

Jawaban: