Question Utiliser CSS dans les vues de Laravel?


J'ai juste commencé à 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 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, mais ce que je veux essayer de faire est d'inclure le CSS dans les vues, j'ai essayé d'ajouter un lien vers une feuille de style dans le répertoire mais la page l'a affiché comme police de navigateur par défaut bien que le CSS était dans le HTML!

Ceci est index.php des entreprises dans le dossier des vues:

<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 CSS mais là encore, le CSS ne s'est pas montré malgré son emplacement dans le dossier de test!

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


89
2017-11-17 18:52


origine


Réponses:


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

142
2017-11-21 18:16



Placez 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

52
2018-04-13 16:28



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 votre vue de lame ...

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


39
2017-11-17 19:07



Vous pouvez aussi écrire une simple balise de lien comme vous le feriez normalement, puis sur href attr utilisez:

<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


21
2017-11-17 19:41



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 et le rendra ensuite.


16
2017-12-21 06:45



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

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

mais si vous utilisez https la requête sera alors bloquée et une erreur de contenu mixte surviendra pour l'utiliser sur https secure_asset comme

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

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


11
2018-01-04 08:44



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

Si vous utilisez les helpers Form ou HTML, vous verrez une erreur indiquant que la classe 'Form' n'est pas trouvée ou que la classe 'Html' est introuvable. Les helpers Form et HTML sont obsolètes dans Laravel 5.0; Cependant, il existe des remplacements dirigés par 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">

7
2017-07-17 10:32