ใช้ CSS ในมุมมอง Laravel?

109

ฉันเพิ่งเริ่มเรียนรู้ Laravel และสามารถเรียนรู้พื้นฐานของคอนโทรลเลอร์และการกำหนดเส้นทางได้

ระบบปฏิบัติการของฉันคือ Mac OS X Lion และอยู่บนเซิร์ฟเวอร์ MAMP

รหัสของฉันจาก 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>";
});

ใช้งานได้มุมมองจะแสดงอย่างสมบูรณ์แบบ '' อย่างไรก็ตาม '' สิ่งที่ฉันต้องการลองทำคือรวม CSS ไว้ในมุมมองฉันพยายามเพิ่มลิงก์ไปยังสไตล์ชีทภายในไดเรกทอรี แต่หน้านั้นแสดงเป็นแบบอักษรเบราว์เซอร์เริ่มต้นด้วยซ้ำ แม้ว่า css จะอยู่ใน HTML!

นี่คือ index.php จากธุรกิจภายในโฟลเดอร์มุมมอง:

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

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

ฉันลองใช้เครื่องมือแม่แบบ Blade ในโฟลเดอร์มุมมองอื่น ๆ ของฉัน (การทดสอบ) เพื่อแสดง CSS แต่อีกครั้ง CSS ไม่แสดงแม้ว่าจะอยู่ในโฟลเดอร์ทดสอบก็ตาม!

ฉันจะเอาชนะปัญหานี้และดีขึ้นได้อย่างไรเมื่อฉันเรียนรู้กรอบนี้อย่างช้าๆ

php frameworks laravel

— avenas8808
แหล่งที่มา

คุณใช้ laravel รุ่นอะไรอยู่?

— ดำ

5

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

— vishalknishad

157

ใส่เนื้อหาของคุณในโฟลเดอร์สาธารณะ

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

และพวกเขาเรียกมันโดยใช้ Laravel

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

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

— Fernando Montoya
แหล่งที่มา

2

อย่าเรียก CSS ภายใน @section หรืออะไรก็ได้ถ้าคุณใช้เบลดได้ผลสำหรับฉัน!

— star18bit

3

คุณต้องใช้เบลดเพื่อให้ไวยากรณ์นั้นทำงานได้ หากคุณไม่ได้ใช้เบลดคุณจะต้องไปกับ: <? php echo HTML :: style ('css / common.css');?>

— Nicholas Kreidberg

6

ตอนนี้แตกต่างจาก Laravel 5.0 ตรงที่ไม่รวมแพ็คเกจ illuminate / html ตามค่าเริ่มต้นอีกต่อไป laracasts.com/series/laravel-5-fundamentals/episodes/10สำหรับรายละเอียด

— dangel

1

ถ้าสิ่งนี้ไม่ได้ผลสำหรับคุณนี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน: stackoverflow.com/questions/15232600/…

— Dan Klos

1

ไม่ได้ผลสำหรับฉันเช่นกัน ข้อผิดพลาดร้ายแรง: ไม่พบคลาส 'HTML'

— geoidesic

56

ใส่เนื้อหาของคุณในโฟลเดอร์สาธารณะ

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

แล้วเรียกมันโดยใช้ 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

(หรือ)

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

— หัวหน้านักพัฒนา
แหล่งที่มา

URL :: asset () อยู่ในตัวในขณะที่ HTML :: style () ต้องใช้แพ็คเกจ

— omarjebari

คุณช่วยเพิ่มคำตอบได้{{ URL::asset('js/scrollTo.js'); }}ไหมว่าจะโทรหารหัสนี้ได้ ที่ไหน ช่วยยกตัวอย่างได้ไหม

— Ramesh Pareek

43

ไฟล์ css ของคุณอยู่ในโฟลเดอร์สาธารณะหรือโฟลเดอร์ย่อยของมัน

fe ถ้าคุณใส่ css ของคุณ

public/css/common.css

คุณจะใช้

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

ในมุมมองใบมีดของคุณ ...

หรือคุณสามารถใช้คลาส Asset http://laravel.com/docs/views/assets ...

— André Keller
แหล่งที่มา

ไม่นี่ไม่ได้สร้างความแตกต่าง ฉันไม่สามารถเข้าถึงอะไรผ่านเบราว์เซอร์ที่มีอยู่ในไดเรกทอรีเหล่านั้น ...

— dcolumbus

@dcolumbus หาก 404 ที่คุณได้รับสร้างขึ้นโดย Laravel (กล่าวคือไม่ใช่ค่าเริ่มต้นของเซิร์ฟเวอร์) แสดงว่าคุณอาจพลาดบรรทัดต่อไปนี้ใน. htaccess (สมมติว่าคุณใช้ Apache): "RewriteCond% {REQUEST_FILENAME}! -f ". บรรทัดนั้นควรอยู่เหนือเส้นที่มี index.php อยู่และจะป้องกันไม่ให้คำร้องขอไปยังพา ธ ที่มีอยู่ในระบบไฟล์ถูกจัดการโดยระบบเส้นทางของ Laravel หาก Laravel ไม่ได้สร้าง 404 ที่ได้รับคุณต้องเพิ่ม "AllowOverride All" ในการกำหนดค่า Apache ของคุณเพื่อให้สามารถประมวลผล. htaccess ได้ (ดูข้อมูลเพิ่มเติมในเอกสาร Apache)

— tjbp

เขาบอกว่าเขาต้องการใส่ไฟล์ css ไว้ในโฟลเดอร์ view ไม่ใช่โฟลเดอร์สาธารณะ, asset () และ HTML :: style / HTML :: script ทุกจุดไปยังไดเร็กทอรีสาธารณะ laravel ไม่อนุญาตให้มีสิ่งใดในโฟลเดอร์ App เข้าถึงโดยภายนอกเพื่อวัตถุประสงค์ด้านความปลอดภัย ดังนั้นแม้ว่าจะมี index.php หรือไม่ก็ไม่สำคัญในสิ่งที่เขาต้องการ

— Bryan P

26

คุณยังสามารถเขียนแท็กลิงก์แบบธรรมดาได้ตามปกติจากนั้นใช้ href attr:

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

แน่นอนคุณต้องวางไฟล์ css ของคุณไว้ใน public / css

— Diego Castaño
แหล่งที่มา

@dcolumbus 404 อาจเป็นเพราะระบุเส้นทางผิดลองเพิ่มคำนำหน้า / public / ค่าเริ่มต้นของ laravel มีคำนำหน้า / public / /public/css/common.css

— david valentino

23

เราสามารถทำได้โดยวิธีต่อไปนี้

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

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

มันจะค้นหาไฟล์สไตล์ในโฟลเดอร์สาธารณะของ Laravel จากนั้นจะแสดงผล

— อาหมัดชารีฟ
แหล่งที่มา

1

เจ๋งอะหมัดมันจะทำงานได้ดีถ้าคุณเชื่อมโยง style-sheet บนhttp <link href = "{{asset ('/ css / style.css')}}}" rel = "stylesheet"> แต่ถ้าคุณใช้httpsแล้ว คำขอจะถูกบล็อกและจะเกิดข้อผิดพลาดเกี่ยวกับเนื้อหาที่หลากหลายหากต้องการใช้งานผ่าน https คุณต้องใช้secure_assetเช่น <link href = "{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset

— Sambhav Pandey

ต้องการเพียง 2 วงเล็บเท่านั้นไม่ใช่ 3

— Oleg Abrazhaev

หากคุณใช้โซลูชันนี้สำหรับ laravel 5 คุณต้องติดตั้งตัวให้บริการ LaravelCollective Forms & HTML ดูคำแนะนำ: laravelcollective.com/docs/5.4/html อย่าลืมเรียกใช้ "การอัปเดตผู้เรียบเรียง" หลังจากที่คุณอัปเดต composer.json แล้ว

— Asimov

15

เช่นเดียวกับที่ Ahmad Sharif กล่าวถึงคุณสามารถเชื่อมโยงสไตล์ชีตได้ http

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

แต่ถ้าคุณใช้httpsคำขอนั้นจะถูกบล็อกและจะเกิดข้อผิดพลาดเกี่ยวกับเนื้อหาแบบผสมหากต้องการใช้งานผ่าน https ให้ใช้secure_assetเช่น

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

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

— Sambhav Pandey
แหล่งที่มา

2

ต้องการเพียง 2 วงเล็บเท่านั้นไม่ใช่ 3

— Radmation

ฉันวางไฟล์ css, js ไว้ที่ไหน ทั้งในpublic/cssหรือresources/assets/css

— NaveenDA

10

เนื่องจาก Laravel 5 HTMLคลาสจะไม่ถูกรวมไว้ตามค่าเริ่มต้นอีกต่อไป

หากคุณใช้ตัวช่วยแบบฟอร์มหรือ HTML คุณจะเห็นข้อผิดพลาดที่ระบุว่าไม่พบคลาส 'ฟอร์ม' หรือไม่พบคลาส 'Html' ตัวช่วยแบบฟอร์มและ HTML เลิกใช้แล้วใน Laravel 5.0 อย่างไรก็ตามมีการทดแทนโดยชุมชนเช่นที่ดูแลโดย Laravel Collective

คุณสามารถใช้บรรทัดต่อไปนี้เพื่อรวมไฟล์ CSS หรือ JS ของคุณ:

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

— Bono
แหล่งที่มา

2

ฉันคิดว่าคำตอบนี้ควรจะสูงขึ้นเพราะนี่น่าจะเป็นวิธีที่ดีกว่าเนื่องจากคลาส HTML เลิกใช้แล้ว

— Asimov

7

อัปเดตสำหรับ laravel 5.4 ----

คำตอบทั้งหมดได้ใช้คลาส HTML สำหรับ laravel แต่ฉันคิดว่าตอนนี้มันถูกหักค่าเสื่อมแล้วใน laravel 5.4 ดังนั้นวางไฟล์ css และ js ของคุณในที่สาธารณะ -> css / js และอ้างอิงใน html ของคุณโดยใช้

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

— Eminem 347
แหล่งที่มา

ใช้งานได้ดีใน Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css ไม่จำเป็น

— Udhav Sarvaiya

5

นั่นเป็นไปไม่ได้เลย Laravel ถือว่าทุกอย่างอยู่ในโฟลเดอร์สาธารณะ

ดังนั้นคำแนะนำของฉันคือ:

ไปที่โฟลเดอร์สาธารณะ
สร้างโฟลเดอร์ชื่อยิ่งCSS
สร้างโฟลเดอร์สำหรับมุมมองที่เกี่ยวข้องเพื่อจัดระเบียบสิ่งต่างๆ
ใส่ css ตามลำดับไว้ในโฟลเดอร์เหล่านั้นซึ่งจะง่ายกว่าสำหรับคุณ

หรือ

หากคุณยืนยันที่จะวาง css ไว้ในโฟลเดอร์ views จริงๆคุณสามารถลองสร้างSymlink (คุณเป็น Mac ก็ใช้ได้ แต่สำหรับ Windows สิ่งนี้จะใช้ได้เฉพาะกับ Vista, Server 2008 หรือสูงกว่า) จากไดเรกทอรีโฟลเดอร์ css ของคุณไปยังสาธารณะ และคุณสามารถใช้{{HTML::style('your_view_folder/myStyle.css')}}ภายในไฟล์มุมมองของคุณต่อไปนี้เป็นรหัสเพื่อความสะดวกของคุณในรหัสที่คุณโพสต์ให้ใส่รหัสเหล่านี้ไว้ข้างหน้า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);

หากคุณต้องการลองทำตามความคิดของคุณจริงๆลองทำสิ่งนี้:

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

แต่จะใช้ไม่ได้แม้ว่าไดเรกทอรีไฟล์จะถูกต้องเนื่องจาก Laravel จะไม่ทำเช่นนั้นเพื่อความปลอดภัย Laravel รักคุณมาก

— ไบรอันพี
แหล่งที่มา

5

ตามความเห็นของฉันตัวเลือกที่ดีที่สุดในการกำหนดเส้นทางไปยัง css & js ใช้รหัสต่อไปนี้:

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

ดังนั้นหากคุณมีไฟล์ css ชื่อ main.css ภายในโฟลเดอร์ css ในโฟลเดอร์สาธารณะควรเป็นดังต่อไปนี้:

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

— kqcreations
แหล่งที่มา

4

ใส่ไฟล์ css ของคุณในโฟลเดอร์สาธารณะ (public / css / bootstrap-responsive.css) และ<link href="./css/bootstrap-responsive.css" rel="stylesheet">

— huuthang
แหล่งที่มา

เจ๋งใช้ได้เลย! แต่มีความแตกต่างระหว่าง<link href="./css/bootstrap-responsive.css" rel="stylesheet">และ<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

— Gregordy

4

คุณสามารถใส่ไฟล์ทั้งหมดในโฟลเดอร์ที่ระบุในที่สาธารณะเช่น

สาธารณะ / css
public / js
public / images

จากนั้นเรียกไฟล์ใน html ปกติเช่น
<link href="css/file.css" rel="stylesheet" type="text/css">

ใช้งานได้ดีกับ Laravel ทุกรุ่น

— ซูซาน
แหล่งที่มา

3

คัดลอกไฟล์ css หรือ js ที่คุณต้องการรวมไปยังโฟลเดอร์สาธารณะหรือคุณอาจต้องการจัดเก็บไฟล์เหล่านั้นในโฟลเดอร์สาธารณะ / css หรือสาธารณะ / js

เช่น. คุณกำลังใช้ไฟล์ style.css จากโฟลเดอร์ css ในไดเร็กทอรีสาธารณะจากนั้นคุณสามารถใช้

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

แต่ใน Laravel 5.2 คุณจะต้องใช้

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

และหากคุณต้องการรวมไฟล์ javascript จากโฟลเดอร์ public / js ก็ค่อนข้างง่ายเช่นกัน

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

และใน Laravel 5.2 คุณจะต้องใช้

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

ฟังก์ชันurl()นี้เป็นฟังก์ชันตัวช่วย laravel ซึ่งจะสร้าง URL ที่มีคุณสมบัติครบถ้วนไปยังเส้นทางที่กำหนด

— Akshay Khale
แหล่งที่มา

3

ใส่ css ของคุณในโฟลเดอร์สาธารณะจากนั้น

เพิ่มสิ่งนี้ในไฟล์เบลดของคุณ

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

— แสงดาว
แหล่งที่มา

3

ใช้ {!! ใน laravel ใหม่

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

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

— TARUN SHARMA
แหล่งที่มา

2

สำหรับ Laravel 5.4 และหากคุณใช้ตัวช่วยผสมให้ใช้

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

— Gsub
แหล่งที่มา

2

ใส่ไว้ในโฟลเดอร์และเรียกว่าในมุมมองกับสิ่งที่ต้องการpublic href="{{ asset('public/css/style.css') }}"โปรดทราบว่าpublicควรรวมไว้เมื่อคุณเรียกใช้เนื้อหา

— อาไบจ
แหล่งที่มา

ไม่จำเป็นต้องระบุโฟลเดอร์ "สาธารณะ" ตัวอย่างเช่นสิ่งนี้ใช้ได้ผลสำหรับฉัน <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet"> ตัวอย่างของคุณไม่ได้ผล

— Isuru

2

สำหรับผู้ที่ต้องการเก็บ js / css ออกจากโฟลเดอร์สาธารณะไม่ว่าด้วยเหตุผลใดก็ตามใน Laravel สมัยใหม่คุณสามารถใช้มุมมองย่อยได้ สมมติว่าโครงสร้างมุมมองของคุณคือ

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

ในการview1เพิ่ม

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

ในviews-js.blade.phpไฟล์ห่อรหัส js ของคุณใน<script>แท็ก

ในการรวมviews-css.blade.phpสไตล์ของคุณไว้ใน<style>แท็ก

นั่นจะบอก Laravel และตัวแก้ไขโค้ดของคุณว่าสิ่งเหล่านี้เป็นความจริงjsและcssไฟล์ คุณสามารถทำเช่นเดียวกันกับ HTML, SVG และสิ่งอื่น ๆ เพิ่มเติมที่เบราว์เซอร์แสดงผลได้

— Arthur Tarasov
แหล่งที่มา