web-dev-qa-db-fra.com

Utilisation de CSS dans les vues Laravel?

Je viens tout juste de commencer à apprendre Laravel et suis capable de faire les bases d’un contrôleur et du routage.

Mon système d'exploitation est Mac OS X Lion et il se trouve sur un serveur MAMP.

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

Cela fonctionne, les vues s’affichent parfaitement. Cependant, ce que je veux essayer, c’est d’inclure du CSS dans les vues, j’ai essayé d’ajouter un lien à une feuille de style dans le répertoire, mais la page l’a affichée comme police de navigateur par défaut même si le css était dans le HTML!

C'est index.php des entreprises dans le dossier views:

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

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

J'ai essayé d'utiliser le moteur de template Blade dans mon autre dossier de vues (testing) pour afficher le CSS, mais encore une fois, le CSS ne s'affichait pas alors qu'il se trouvait dans le dossier de test!

Comment puis-je surmonter ce problème et aller mieux - alors que j'apprends lentement ce cadre.

phpframeworkslaravel
96
avenas8808

Placez vos actifs dans le dossier public

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

Et ils l'appelaient en utilisant Laravel 

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

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

Placez vos actifs dans le dossier public

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

Et puis appelé en utilisant 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

(OU)

{{ 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
53
Mahendra Jella

votre fichier css appartient au dossier public ou à un sous-dossier de celui-ci.

f.e si vous mettez votre css dans 

public/css/common.css

vous utiliseriez

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

Dans la vue de votre lame ...

Vous pouvez également utiliser la classe d'actif http://laravel.com/docs/views/assets ...

42
André Keller

Vous pouvez également écrire une simple balise de lien comme vous le feriez normalement, puis utiliser href attr:

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

bien sûr, vous devez mettre votre fichier css sous public/css

23
Diego Castaño

Nous pouvons le faire de la manière suivante.

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

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

Il recherchera le fichier de style dans le dossier public de Laravel puis le restituera.

19
Ahmad Sharif

Comme Ahmad Sharif l'a mentionné, vous pouvez lier la feuille de style sur http

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

mais si vous utilisez https, la demande sera bloquée et une erreur de contenu mixte se produira. Pour l'utiliser sur https, utilisez secure_asset comme

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

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

11
Sambhav

Depuis Laravel 5, la classe HTML n'est plus incluse par défaut.

Si vous utilisez des aides de formulaire ou HTML, vous verrez une erreur indiquant que la classe 'Form' n'est pas trouvée ou la classe 'Html' non trouvée. Les utilitaires Form et HTML sont obsolètes dans Laravel 5.0; Cependant, il existe des remplacements à l'initiative de la communauté, tels que ceux maintenus par le collectif Laravel.

Vous pouvez utiliser la ligne suivante pour inclure vos fichiers CSS ou JS:

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

Mise à jour pour laravel 5.4 ----

Toutes les réponses ont utilisé la classe HTML pour laravel mais je suppose qu’elle est maintenant dépréciée dans laravel 5.4, donc Mettez vos fichiers css et js en public-> css/js .__ et faites référence à ceux-ci dans votre code HTML à l’aide de

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

Ce n'est pas possible frère, Laravel suppose que tout est dans le dossier public.

Donc ma suggestion est: 

  1. Allez dans le dossier public .
  2. Créez un dossier, de préférence nommé css .
  3. Créez le dossier des vues respectives pour organiser les choses.
  4. Mettez les css respectifs à l'intérieur de ces dossiers, ce serait plus facile pour vous.

Ou

Si vous insistez vraiment pour placer css à l'intérieur du dossier views, vous pouvez essayer de créer Symlink (vous êtes Mac, donc c'est correct, mais pour Windows, cela ne fonctionnera que pour Vista, Server 2008 ou supérieur) à partir de votre dossier css. répertoire du dossier public et vous pouvez utiliser {{HTML::style('your_view_folder/myStyle.css')}} dans vos fichiers d’affichage, voici un code pour votre commodité, dans le code que vous avez posté, mettez-les devant le 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);

Si vous voulez vraiment essayer de faire votre idée, essayez ceci:

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

Mais cela ne fonctionnera pas même si le répertoire de fichiers est correct car Laravel ne le fera pas pour des raisons de sécurité, Laravel vous aime beaucoup.

5
Bryan P

mettez votre fichier css dans un dossier public. (public/css/bootstrap-responsive.css) et <link href="./css/bootstrap-responsive.css" rel="stylesheet">

4
huuthang

mettez votre css dans un dossier public, puis

ajoutez ceci dans votre fichier de lame

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

A mon avis, la meilleure option pour router vers css & js utilise le code suivant:

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

Donc, si vous avez un fichier css appelé main.css dans un dossier css dans un dossier public, il devrait être le suivant:

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

Vous pouvez simplement mettre tous les fichiers de son dossier spécifié en public, comme

public/css 
public/js 
public/images

Ensuite, appelez les fichiers comme en HTML normal, comme
<link href="css/file.css" rel="stylesheet" type="text/css">

Cela fonctionne très bien dans n'importe quelle version de Laravel

1
suzan

Utilisation {!! à new laravel 

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

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

Pour Laravel 5.4 et si vous utilisez Mix Helper, utilisez

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

Placez-les dans le dossier public et appelez-le dans la vue avec quelque chose comme href="{{ asset('public/css/style.css') }}". Notez que la public doit être incluse lorsque vous appelez les actifs.

0
Abaij

Pour ceux qui ont besoin de garder js/css hors du dossier public pour quelque raison que ce soit, dans Laravel moderne, vous pouvez utiliser sous-vues . Dites que la structure de vos vues est

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

dans view1 add

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

dans les fichiers views-js.blade.php encapsulez votre code js dans la balise <script>

dans views-css.blade.php encapsulez vos styles dans la balise <style>

Cela indiquera à Laravel et à votre éditeur de code que ce sont en fait des fichiers js et css. Vous pouvez faire la même chose avec du HTML supplémentaire, des SVG et d'autres éléments pouvant être rendus par le navigateur.

0
Arthur Tarasov