Sử dụng CSS trong các khung nhìn Laravel?


108

Tôi vừa mới bắt đầu học Laravel và có thể làm những điều cơ bản về bộ điều khiển và định tuyến.

Hệ điều hành của tôi là Mac OS X Lion và nó nằm trên máy chủ MAMP.

Mã của tôi từ 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>";
});

Điều đó hoạt động, các chế độ xem hiển thị hoàn hảo, '' tuy nhiên '' những gì tôi muốn thử và làm là bao gồm CSS trong các chế độ xem, tôi đã thử thêm vào một liên kết đến một biểu định kiểu trong thư mục nhưng trang hiển thị nó dưới dạng phông chữ trình duyệt mặc định mặc dù css đã có trong HTML!

Đây là index.php từ các doanh nghiệp trong thư mục views:

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

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

Tôi đã thử sử dụng công cụ mẫu Blade trong thư mục chế độ xem khác của mình (đang thử nghiệm) để hiển thị CSS nhưng một lần nữa CSS không hiển thị mặc dù nó đang ở trong thư mục thử nghiệm!

Làm cách nào để tôi có thể vượt qua vấn đề này và trở nên tốt hơn - vì tôi đang dần học hỏi khung này.


Bạn thậm chí đang sử dụng phiên bản laravel nào?
Đen

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

Câu trả lời:


156

Đặt nội dung của bạn vào thư mục chung

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

Và họ gọi nó bằng Laravel

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

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

2
Đừng gọi CSS bên trong @section hoặc bất cứ thứ gì, nếu bạn sử dụng blade, đã làm việc cho tôi!
star18bit

3
Bạn phải sử dụng blade để cú pháp đó hoạt động. Nếu bạn không sử dụng blade thì bạn sẽ phải sử dụng: <? Php echo HTML :: style ('css / common.css');?>
Nicholas Kreidberg

6
Điều này hiện đã khác đối với Laravel 5.0, nơi gói chiếu sáng / html không còn được bao gồm theo mặc định laracasts.com/series/laravel-5-fundamentals/episodes/10 để biết chi tiết
dangel

1
Nếu điều này không làm việc cho bạn, đây là những gì làm việc cho tôi: stackoverflow.com/questions/15232600/...
Dan Klos

1
Nó cũng không làm việc cho tôi. Lỗi chết người: Class 'HTML' không tìm thấy
geoidesic

56

Đặt nội dung của bạn vào thư mục chung

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

Và sau đó gọi nó bằng 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

(HOẶC LÀ)

{{ 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 :: tài sản () được tích hợp trong khi HTML :: phong cách () yêu cầu một gói
omarjebari

Bạn có thể vui lòng thêm vào câu trả lời của bạn để gọi mã này ở {{ URL::asset('js/scrollTo.js'); }}đâu? bạn có thể đưa ra một ví dụ không?
Ramesh Pareek

43

tệp css của bạn thuộc thư mục công cộng hoặc thư mục con của nó.

fe nếu bạn đưa css của bạn vào

public/css/common.css

bạn sẽ sử dụng

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

Trong chế độ xem phiến của bạn ...

Hoặc bạn cũng có thể sử dụng lớp Nội dung http: //laravel.com/docs/views/assets ...


Không, điều này không tạo ra sự khác biệt. Tôi không thể truy cập bất cứ điều gì thông qua trình duyệt chứa trong những thư mục ...
dcolumbus

@dcolumbus Nếu 404 bạn đang nhận được tạo bởi Laravel (tức là không phải mặc định của máy chủ), thì bạn có thể thiếu dòng sau trong .htaccess của mình (giả sử bạn đang sử dụng Apache): "RewriteCond% {REQUEST_FILENAME}! -f ”. Dòng đó phải ở trên dòng có index.php trong đó và sẽ ngăn các yêu cầu đến đường dẫn tồn tại trong hệ thống tệp được hệ thống định tuyến của Laravel xử lý. Nếu 404 nhận được không phải do Laravel tạo, bạn cần thêm "AllowOverride All" vào cấu hình Apache của mình để xử lý .htaccess (xem tài liệu Apache để biết thêm thông tin).
tjbp

Anh ấy cho biết anh ấy muốn đặt các tệp css bên trong thư mục xem, không phải thư mục công khai, tài sản () và HTML :: style / HTML :: script tất cả đều trỏ đến thư mục công khai, laravel không cho phép bất kỳ thứ gì bên trong thư mục Ứng dụng. được truy cập bởi các vấn đề bên ngoài vì mục đích bảo mật. Vì vậy, ngay cả khi có index.php hay không không quan trọng trong những gì anh ta muốn.
Bryan P

26

Bạn cũng có thể viết một thẻ liên kết đơn giản như bạn thường làm và sau đó sử dụng href attr:

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

tất nhiên bạn cần đặt tệp css của mình dưới public / css


@dcolumbus 404 có thể do đưa sai đường dẫn, hãy thử thêm tiền tố / public /, mặc định laravel có tiền tố / public / /public/css/common.css
david valentino

23

Chúng ta có thể làm điều này bằng cách sau.

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

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

Nó sẽ tìm kiếm tệp kiểu trong thư mục chung của Laravel và sau đó sẽ hiển thị nó.


1
Tuyệt vời Ahmad, nó sẽ hoạt động tốt nếu bạn liên kết style-sheet qua http <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet"> nhưng nếu bạn đang sử dụng httpsthì yêu cầu sẽ bị chặn và sẽ xảy ra lỗi nội dung hỗn hợp, để sử dụng nó qua https, bạn phải sử dụng secure_assetnhư <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset
Sambhav Pandey

Chỉ có 2 dấu ngoặc là cần thiết - không 3.
Oleg Abrazhaev

Nếu bạn sử dụng giải pháp này cho laravel 5, bạn cần cài đặt nhà cung cấp LaravelCollective Forms & HTML. Xem: laravelcollective.com/docs/5.4/html để biết hướng dẫn. Đừng quên chạy "cập nhật nhà soạn nhạc" sau khi bạn đã cập nhật composer.json.
Asimov

15

Giống như Ahmad Sharif đã đề cập, bạn có thể liên kết bảng định kiểu qua http

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

nhưng nếu bạn đang sử dụng httpsthì yêu cầu sẽ bị chặn và lỗi nội dung hỗn hợp sẽ đến, để sử dụng nó hơn https, hãy sử dụng secure_assetnhư

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

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


2
Chỉ có 2 dấu ngoặc là cần thiết - không 3.
Radmation

Tôi đặt tệp css, js ở đâu? hoặc public/csshoặcresources/assets/css
NaveenDA

10

Vì Laravel 5, HTMLlớp này không được bao gồm theo mặc định nữa.

Nếu bạn đang sử dụng trình trợ giúp Biểu mẫu hoặc HTML, bạn sẽ thấy lỗi cho biết không tìm thấy lớp 'Biểu mẫu' hoặc không tìm thấy lớp 'Html'. Trình trợ giúp Biểu mẫu và HTML đã không còn được dùng trong Laravel 5.0; tuy nhiên, có những thay thế do cộng đồng định hướng như những thay thế được duy trì bởi Laravel Collective.

Bạn có thể sử dụng dòng sau để bao gồm các tệp CSS hoặc JS của mình:

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

2
Tôi nghĩ câu trả lời này nên cao hơn vì đây có vẻ là cách được ưa chuộng hơn, vì lớp HTML không được dùng nữa.
Asimov

7

Cập nhật cho laravel 5.4 ----

Tất cả các câu trả lời đã sử dụng lớp HTML cho laravel nhưng tôi đoán bây giờ nó đã bị mất giá trong laravel 5.4, vì vậy hãy đặt các tệp css và js của bạn ở chế độ công khai-> css / js Và tham chiếu chúng trong html của bạn bằng cách sử dụng

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

Đây là hoạt động tốt trong Laravel <link href = "css / Common.css" rel = "stylesheet"> css.common.css không cần thiết
Udhav Sarvaiya

5

Điều đó là không thể, anh bạn, Laravel cho rằng mọi thứ đều nằm trong thư mục chung.

Vì vậy, gợi ý của tôi là:

  1. Tới các công thư mục.
  2. Tạo một thư mục, tốt nhất là đặt tên css .
  3. Tạo thư mục cho các dạng xem tương ứng để sắp xếp mọi thứ.
  4. Đặt css tương ứng bên trong các thư mục đó, điều đó sẽ dễ dàng hơn cho bạn.

Hoặc là

Nếu bạn thực sự muốn đặt css bên trong thư mục views, bạn có thể thử tạo Symlink (bạn là mac nên không sao, nhưng đối với windows, điều này sẽ chỉ hoạt động đối với Vista, Server 2008 trở lên) từ thư mục thư mục css của bạn để công khai thư mục và bạn có thể sử dụng {{HTML::style('your_view_folder/myStyle.css')}}bên trong các tệp xem của mình, đây là mã để thuận tiện cho bạn, trong mã bạn đã đăng, hãy đặt chúng trước 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);

Nếu bạn thực sự muốn thử thực hiện ý tưởng của mình, hãy thử cách này:

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

Nhưng nó sẽ không hoạt động ngay cả khi thư mục tệp chính xác vì Laravel sẽ không làm điều đó vì mục đích bảo mật, Laravel yêu bạn rất nhiều.


5

Theo ý kiến ​​của tôi, tùy chọn tốt nhất để định tuyến đến css & js sử dụng mã sau:

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

Vì vậy, nếu bạn có tệp css được gọi là main.css bên trong thư mục css trong thư mục công khai, nó sẽ như sau:

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

4

đặt tệp css của bạn vào thư mục chung. (public / css / bootstrap-responsive.css) và<link href="./css/bootstrap-responsive.css" rel="stylesheet">


Tuyệt vời, nó hoạt động! Nhưng, có bất kỳ sự khác biệt nào giữa <link href="./css/bootstrap-responsive.css" rel="stylesheet"><link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">
Gregordy

4

Bạn có thể chỉ cần đặt tất cả các tệp trong thư mục được chỉ định của nó ở chế độ công khai như


public / css
public / js
public / images


Sau đó, chỉ cần gọi các tệp như trong html bình thường như
<link href="css/file.css" rel="stylesheet" type="text/css">

Nó hoạt động tốt trong bất kỳ phiên bản nào của Laravel


3

Sao chép tệp css hoặc js mà bạn muốn bao gồm vào thư mục chung hoặc bạn có thể muốn lưu trữ chúng trong các thư mục public / css hoặc public / js.

Ví dụ. bạn đang sử dụng tệp style.css từ thư mục css trong thư mục chung thì bạn có thể sử dụng

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

Nhưng trong Laravel 5.2, bạn sẽ phải sử dụng

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

và nếu bạn muốn bao gồm các tệp javascript từ thư mục public / js, nó cũng khá đơn giản

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

và trong Laravel 5.2, bạn sẽ phải sử dụng

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

hàm url()là một hàm trợ giúp laravel sẽ tạo URL đủ điều kiện đến đường dẫn nhất định.


3

đặt css của bạn vào thư mục chung, sau đó

thêm cái này vào tệp phiến của bạn

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

3

Sử dụng {!! trong laravel mới

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

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

2

Đối với Laravel 5.4 và nếu bạn đang sử dụng trình trợ giúp kết hợp, hãy sử dụng

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

2

Đặt chúng trong publicthư mục và gọi nó trong chế độ xem với một cái gì đó như href="{{ asset('public/css/style.css') }}". Lưu ý rằng publicphải được bao gồm khi bạn gọi nội dung.


Không cần phải ghi thư mục "công khai". Ví dụ, điều này đã làm việc cho tôi. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Ví dụ của bạn không hoạt động.
Isuru

2

Đối với những người cần giữ js / css ngoài thư mục chung vì bất kỳ lý do gì, trong Laravel hiện đại, bạn có thể sử dụng chế độ xem phụ . Giả sử cấu trúc chế độ xem của bạn là

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

view1thêm vào

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

trong views-js.blade.phpcác tệp, bọc mã js của bạn trong <script>thẻ

trong views-css.blade.phpquấn phong cách của bạn trong <style>thẻ

Điều đó sẽ cho Laravel và trình soạn thảo mã của bạn biết rằng đó là trên thực tế jsvà là csstệp. Bạn có thể làm tương tự với HTML, SVG bổ sung và những thứ khác có thể hiển thị trên trình duyệt

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.