web-dev-qa-db-ja.com

LaravelビューでCSSを使用する

私は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にありましたが！

これは、viewsフォルダー内の企業からのindex.phpです。

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

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

私は他のViewsフォルダ（testing）でBladeテンプレートエンジンを使ってCSSを表示しようとしましたが、それでもtestingフォルダにあってもCSSは表示されませんでした！

私はこのフレームワークをゆっくり学んでいるので、どうすればこの問題を克服し、良くなることができますか。

phpframeworkslaravel
98
avenas8808

あなたのアセットをパブリックフォルダに入れる

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

そして彼らはLaravelを使ってそれを呼びました

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

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

あなたのアセットをパブリックフォルダに入れる

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
54
Lead Developer

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

あなたがあなたのcssを入れるならf.e

public/css/common.css

あなたが使うだろう

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

ブレードビューでは.

あるいは、Assetクラスを使うこともできます http://laravel.com/docs/views/assets ...

42
André Keller

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

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

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

24
Diego Castaño

次の方法でこれを行うことができます。

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

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

Laravelのパブリックフォルダでスタイルファイルを検索してからレンダリングします。

21
Ahmad Sharif

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

11
Sambhav Pandey

Laravel 5以降、HTMLクラスはデフォルトで含まれなくなりました。

FormまたはHTMLヘルパーを使用している場合は、クラス 'Form'が見つからないかクラス '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">
10
Bono

Laravel 5.4用のアップデート----

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

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

それは不可能ではありません、Laravelはすべてがパブリックフォルダにあると仮定します。

だから私の提案は：

  1. publicフォルダに行きます。
  2. できればcssという名前のフォルダを作成します。
  3. 物事を整理するためにそれぞれのビュー用のフォルダを作成します。
  4. それぞれのcssをそれらのフォルダーの中に入れてください。

または

Cssをviewsフォルダの中に入れたいのなら、Symlinkを作成してみることができます（あなたはMacなので大丈夫ですが、Windowsの場合はこれになります）。 cssフォルダからパブリックフォルダへの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
Bryan P

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

4
huuthang

私の意見では、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
kqcreations

含める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を生成する、より手間のかかるヘルパー関数です。

3
Akshay Khale

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

これをあなたのブレードファイルに追加する

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

次のようにして、指定されたフォルダにすべてのファイルを公開することができます。

public/css
public/js
public/images

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

Laravelのどのバージョンでも問題なく動作します。

3
suzan

つかいます {！！新しいレベルで

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

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

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

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

それらをpublicフォルダーに入れ、href="{{ asset('public/css/style.css') }}"のようなものでビュー内でそれを呼び出します。アセットを呼び出すときにpublicを含める必要があることに注意してください。

1
Abaij

何らかの理由でjs/cssをパブリックフォルダから除外する必要がある人のために、現代のLaravelでは sub-views を使うことができます。ビュー構造が

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

view1 addに

@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、その他ブラウザでレンダリング可能なものでも同じことができます。

1
Arthur Tarasov