LaravelビューでCSSを使用していますか?


108

Laravelの学習を始めたばかりで、コントローラーとルーティングの基本を実行できます。

私のOSはMac OS X Lionで、MAMPサーバー上にあります。

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

それは機能し、ビューは完全に表示されますが、私が試してやりたいことはビュー内に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.

他のビューフォルダー(テスト)でブレードテンプレートエンジンを使用してCSSを表示しようとしましたが、テストフォルダーにあるにもかかわらずCSSは表示されませんでした。

このフレームワークをゆっくりと学習しているため、どうすればこの問題を克服し、改善できるでしょうか。


あなたはどんなララベルバージョンを使っていますか?
ブラック

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

回答:


156

アセットをパブリックフォルダーに配置する

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

そして彼らはLaravelを使ってそれを呼んだ

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

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

2
@section内でCSSを呼び出さないでください。ブレードを使用している場合は、私のために機能しました!
star18bit 2013年

3
その構文を機能させるには、ブレードを使用する必要があります。ブレードを使用していない場合は、次のようにする必要があります。<?php echo HTML :: style( 'css / common.css');?>
Nicholas Kreidberg

6
これが点灯/ htmlのパッケージはもはやデフォルトで含まれLaravel 5.0のために今異なっている laracasts.com/series/laravel-5-fundamentals/episodes/10詳細
dangel

1
これでうまくいかない場合は、次の方法でうまくいきました
。stackoverflow.com/ questions

1
私にとってもうまくいきません。致命的エラー:クラス「HTML」が見つかりません
ジオデシック

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 2017年

43

cssファイルは、パブリックフォルダーまたはそのサブフォルダーに属しています。

あなたがあなたのCSSを入れたらfe

public/css/common.css

あなたは使うでしょう

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

ブレードビューで...

または、アセットクラスhttp://laravel.com/docs/views/assets ...


いや、これは違いはありません。これらのディレクトリに含まれているブラウザからは何にもアクセスできません...
dcolumbus

@dcolumbus受信している404がLaravelによって生成された場合(つまり、サーバーのデフォルトではない場合)、. htaccessに次の行がない可能性があります(Apacheを使用している場合): "RewriteCond%{REQUEST_FILENAME}! -f」。その行は、index.phpが含まれている行の上にある必要があり、ファイルシステムに存在するパスへのリクエストがLaravelのルーティングシステムによって処理されるのを防ぎます。受信した404がLaravelによって生成されていない場合、.htaccessを処理するには、AllowOverride AllをApache構成に追加する必要があります(詳細については、Apacheのドキュメントを参照してください)。
tjbp 2013年

彼はcssファイルをパブリックフォルダーではなく、ビューフォルダー内に置きたいと述べました。asset()とHTML :: style / HTML :: scriptはすべてパブリックディレクトリを指し、laravelはアプリフォルダー内には何も許可しませんセキュリティ上の理由から、外部からアクセスされます。したがって、index.phpが存在してもしなくても、彼が何をしたいかは問題ではありません。
Bryan P

26

通常のように単純なリンクタグを記述して、href attrを使用することもできます。

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

もちろん、あなたはcssファイルをpublic / cssの下に置く必要があります


@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
Cool Ahmad、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
オレグAbrazhaev

このソリューションをlaravel 5に使用する場合は、LaravelCollective Forms&HTMLプロバイダーをインストールする必要があります。手順については、laravelcollective.com / docs / 5.4 / htmlを参照してください。composer.jsonを更新した後は、必ず「composer update」を実行してください。
アシモフ2017年

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


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

2
HTMLクラスが廃止されたため、これが推奨される方法であると思われるため、この答えはもっと高くなるはずです。
アシモフ2017年

7

laravel 5.4の更新----

すべての回答はlaravelのHTMLクラスを使用していますが、現在laravel 5.4で廃止されていると思いますので、cssおよびjsファイルをpublic-> css / jsに配置し、htmlでそれらを参照してください

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

これはLaravel <link href = "css / common.css" rel = "stylesheet"> css.common.cssでうまく機能しています
Udhav Sarvaiya '25

5

これは不可能です。Laravelはすべてがパブリックフォルダにあると想定しています。

だから私の提案は:

  1. パブリックフォルダに移動します。
  2. できればcssという名前のフォルダーを作成します。
  3. 整理するために、それぞれのビューのフォルダを作成します。
  4. それぞれのcssをこれらのフォルダー内に配置すると、より簡単になります。

または

本当にcssをviewsフォルダ内に置くことを主張する場合は、cssフォルダディレクトリから一般にSymlinkを作成してみてください(Macなら問題ありませんが、Windowsの場合、これはVista、Server 2008以降でのみ機能します)フォルダーと{{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') }}">

4

あなたのCSSファイルをパブリックフォルダに置きます。(public / css / bootstrap-responsive.css)および<link href="./css/bootstrap-responsive.css" rel="stylesheet">


すばらしい、うまくいきました!しかし、間に違いがある<link href="./css/bootstrap-responsive.css" rel="stylesheet"><link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">
Gregordy

4

あなたは単純にすべてのファイルをパブリックの指定されたフォルダに置くことができます


public / css
public / js
public / images


次に、通常のhtmlのようにファイルを呼び出すだけです
<link href="css/file.css" rel="stylesheet" type="text/css">

Laravelのどのバージョンでも問題なく機能します


3

含めたいcssまたはjsファイルをパブリックフォルダーにコピーするか、それらをpublic / cssまたはpublic / jsフォルダーに保存することができます。

例えば。パブリックディレクトリのcssフォルダからstyle.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"/>

また、public / jsフォルダーからjavascriptファイルを含める場合も、かなり簡単です。

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

Laravel 5.2では、使用する必要があります

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

この関数url()は、指定されたパスへの完全修飾URLを生成するlaravelヘルパー関数です。


3

あなたのCSSをパブリックフォルダに入れてから、

これをブレードファイルに追加します

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

3

使用する {!!新しいララベルで

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

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

2

Laravel 5.4の場合、ミックスヘルパーを使用している場合は、

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

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、およびその他のものでも同じことができます

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.