Vous utilisez CSS dans les vues Laravel?

108

Je viens de commencer à apprendre Laravel et je peux faire les bases d'un contrôleur et d'un routage.

Mon système d'exploitation est Mac OS X Lion, et il est 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 est d'inclure du CSS dans les vues, j'ai essayé d'ajouter un lien vers une feuille de style dans le répertoire mais la page l'affichait comme police de navigateur par défaut même même si le css était dans le HTML!

Voici 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 modèle Blade dans mon autre dossier de vues (test) pour afficher le CSS, mais encore une fois, le CSS ne s'affichait pas bien qu'il soit dans le dossier de test!

Comment puis-je surmonter ce problème et m'améliorer - alors que j'apprends lentement ce cadre.

php  frameworks  laravel 
— avenas8808
source
Quelle version de laravel utilisez-vous même?
— Black
5
{{ URL::asset('css/css.css') }}
— vishalknishad le

Réponses:

156

Mettez vos actifs dans le dossier public

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

Et ils l'ont appelé en utilisant Laravel 

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

{{ HTML::style('css/css.css'); }}
— Fernando Montoya
source
2
N'appelez pas CSS dans @section ou quoi que ce soit, si vous utilisez Blade, cela a fonctionné pour moi!
— star18bit
3
Vous devez utiliser Blade pour que cette syntaxe fonctionne. Si vous n'utilisez pas Blade, vous devrez utiliser: <? Php echo HTML :: style ('css / common.css');?>
— Nicholas Kreidberg
6
C'est différent maintenant pour Laravel 5.0 où le paquet illuminate / html n'est plus inclus par défaut laracasts.com/series/laravel-5-fundamentals/episodes/10 pour plus de détails
— dangel
1
Si cela ne fonctionne pas pour vous, voici ce qui a fonctionné pour moi: stackoverflow.com/questions/15232600/…
— Dan Klos
1
Cela ne fonctionne pas non plus pour moi. Erreur fatale: classe 'HTML' introuvable
— géoidesique
56

Mettez vos actifs dans le dossier public

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

Et puis l'a 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
— Développeur principal
source
URL :: asset () est intégré alors que HTML :: style () nécessite un package
— omarjebari
Pouvez-vous s'il vous plaît ajouter à votre réponse où appeler ce code {{ URL::asset('js/scrollTo.js'); }}? Pouvez-vous donner un exemple?
— Ramesh Pareek
43

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

fe si vous mettez votre css dans 

public/css/common.css

vous utiliseriez

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

Dans votre vue de la lame ...

Ou vous pouvez également utiliser la classe Asset http://laravel.com/docs/views/assets ...

— André Keller
source
Non, cela ne fait aucune différence. Je ne peux accéder à rien via le navigateur contenu dans ces répertoires ...
— dcolumbus
@dcolumbus Si le 404 que vous recevez est généré par Laravel (c'est-à-dire pas la valeur par défaut du serveur), il se peut que vous manquiez la ligne suivante dans votre .htaccess (en supposant que vous utilisez Apache): "RewriteCond% {REQUEST_FILENAME}! -F". Cette ligne devrait aller au-dessus de celle contenant index.php, et empêchera les requêtes aux chemins qui existent dans le système de fichiers d'être gérées par le système de routage de Laravel. Si le 404 reçu n'est pas généré par Laravel, vous devez ajouter "AllowOverride All" à votre configuration Apache pour que le .htaccess soit traité (voir la documentation Apache pour plus d'informations).
— tjbp
Il a dit qu'il voulait mettre les fichiers css à l'intérieur du dossier de vue, pas le dossier public, asset () et HTML :: style / HTML :: script tous pointent vers le répertoire public, laravel n'autorise rien à l'intérieur du dossier App à être accessible par des personnes extérieures à des fins de sécurité. Donc, même s'il y a index.php ou pas n'a pas d'importance dans ce qu'il veut.
— Bryan P du
26

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

<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

— Diego Castaño
source
@dcolumbus 404 peut-être parce que vous donnez le mauvais chemin, essayez d'ajouter le préfixe / public /, laravel par défaut a le préfixe / public / /public/css/common.css
— david valentino
23

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.

— Ahmad Sharif
source
1
Cool Ahmad, cela fonctionnera très bien si vous liez la feuille de style sur http <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet"> mais si vous utilisez httpsalors le la demande sera bloquée et une erreur de contenu mixte viendra, pour l'utiliser sur https, vous devez utiliser secure_assetcomme <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = "styleheet" > laravel.com/docs/5.1/helpers#method-secure-asset
— Sambhav Pandey
Seulement 2 supports sont nécessaires - pas 3.
— Oleg Abrazhaev
Si vous utilisez cette solution pour laravel 5, vous devez installer le fournisseur LaravelCollective Forms & HTML. Voir: laravelcollective.com/docs/5.4/html pour obtenir des instructions. N'oubliez pas d'exécuter "composer update" après avoir mis à jour composer.json.
— Asimov
15

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, httpsla demande sera bloquée et une erreur de contenu mixte viendra, pour l'utiliser sur https, utilisez secure_assetcomme

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

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

— Sambhav Pandey
source
2
Seulement 2 supports sont nécessaires - pas 3.
— Radmation
Où placer mon fichier css, js? soit le public/cssouresources/assets/css
— NaveenDA
10

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

Si vous utilisez des aides Form ou HTML, vous verrez une erreur indiquant que la classe «Form» n'a pas été trouvée ou la classe «Html» n'a pas été trouvée. Les assistants Form et HTML sont obsolètes dans Laravel 5.0; cependant, il y a des remplacements dirigés par la communauté comme 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">
— Bono
source
2
Je pense que cette réponse devrait être plus élevée car cela semble être la méthode préférée, car la classe HTML est obsolète.
— Asimov
7

Mise à jour pour laravel 5.4 ----

Toutes les réponses ont utilisé la classe HTML pour laravel mais je suppose qu'elle a été dépréciée maintenant dans laravel 5.4, alors mettez vos fichiers css et js dans public-> css / js et référencez-les dans votre html en utilisant

<link href="css/css.common.css" rel="stylesheet" >
— Eminem347
source
Cela fonctionne bien dans Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css pas nécessaire
— Udhav Sarvaiya
5

Ce n'est pas possible bro, Laravel suppose que tout est dans un dossier public.

Donc ma suggestion est:

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

Ou

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

— Bryan P
source
5

À mon avis, la meilleure option pour acheminer 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 le dossier css du dossier public, il devrait être le suivant:

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/main.css') }}">
— kqcréations
source
4

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

— Huuthang
source
Génial, ça marche! Mais, y a-t-il une différence entre <link href="./css/bootstrap-responsive.css" rel="stylesheet">et<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">
— Gregordy
4

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

public / css
public / js
public / images

Ensuite, appelez simplement 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

— suzan
source
3

Copiez le fichier css ou js que vous souhaitez inclure dans un dossier public ou vous souhaiterez peut-être les stocker dans des dossiers public / css ou public / js.

Par exemple. vous utilisez le fichier style.css du dossier css dans le répertoire public, vous pouvez utiliser

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

Mais dans Laravel 5.2, vous devrez utiliser

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

et si vous souhaitez inclure des fichiers javascript du dossier public / js, c'est assez simple aussi

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

et dans Laravel 5.2, vous devrez utiliser

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

la fonction url()est une fonction d'aide laravel qui générera une URL complète vers un chemin donné.

— Akshay Khale
source
3

mettez votre css dans un dossier public, puis

ajoutez ceci dans votre fichier lame

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

Utilisation {!! dans le nouveau laravel

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

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

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>
— Gsub
source
2

Mettez-les dans un publicdossier et appelez-le dans la vue avec quelque chose comme href="{{ asset('public/css/style.css') }}". Notez que le publicdoit être inclus lorsque vous appelez les actifs.

— Abaij
source
Pas besoin d'indiquer le dossier "public". Par exemple, cela a fonctionné pour moi. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Votre exemple n'a pas fonctionné.
— Isuru
2

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 des sous-vues . Dites que votre structure de vues est

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

en view1plus

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

dans les views-js.blade.phpfichiers, enveloppez votre code js dans<script> balise

en views-css.blade.phpenveloppant vos styles en <style>tag

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

— Arthur Tarasov
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.