Using CSS in Laravel views?

我刚刚开始学习 Laravel，可以做一个控制器和路由的基本知识。

我的操作系统是 Mac OS X Lion，它在 MAMP 服务器上。

返回文章页面我的代码译者:

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

That works, the views display perfectly, ''however'' what I want to try and do is include CSS within the views, I tried adding in a link to a stylesheet within the directory but the page displayed it as the default browser font even though the css was in the HTML!

这是来自 views 文件夹中的企业的 index.php:

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


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

我尝试使用刀片模板引擎在我的其他视图文件夹(测试)显示 CSS，但再次 CSS 没有显示，尽管它是在测试文件夹！

我如何才能克服这个问题，并变得更好-因为我正在慢慢学习这个框架。

414114 次浏览
小开

您的 css 文件属于公用文件夹或其子文件夹。

如果你把你的 CSS 放进去

public/css/common.css

you would use

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

在你看来。

Or you could also use the Asset class http://laravel.com/docs/views/assets...

小开

You can also write a simple link tag as you normaly would and then on the href attr use:

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

当然你需要把你的 css 文件放在 public/css 下面

小开

把你的资产放在公共文件夹中; 例如:

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

然后，要使用 Laravel 访问它们，请使用:

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


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

或者:

\{\{ URL::asset('js/scrollTo.js'); }}


\{\{ URL::asset('css/css.css'); }}

This syntax will automatically generate the correct path (e.g., `public/js/scrollTo.js').

小开

这不可能，兄弟 Laravel 认为所有文件都在公共文件夹里。

所以我的建议是:

  1. 转到 public文件夹。
  2. 创建一个文件夹，最好命名为 CSS。
  3. 为各个视图创建文件夹，以使事情井然有序。
  4. 把各自的 css 放在这些文件夹中，这对你来说会更容易。

或者

If you really insist to put css inside of views folder, you could try creating Symlink (you're mac so it's ok, but for windows, this will only work for Vista, Server 2008 or greater) from your css folder directory to the public folder and you can use \{\{HTML::style('your_view_folder/myStyle.css')}} inside of your view files, here's a code for your convenience, in the code you posted, put these before the 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 非常喜欢您。

小开

我们可以通过以下方法来做到这一点。

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


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

It will search the style file in the public folder of Laravel and then will render it.

小开

将 css 文件放入公用文件夹(public/css/bootstrap-response. css) and <link href="./css/bootstrap-responsive.css" rel="stylesheet">

小开

将要包含的 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()是一个 laravel 辅助函数，它将生成指定路径的完全限定 URL。

小开

正如 Ahmad Sharif 提到的，您可以通过 http链接样式表

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

but if you are using https then the request will be blocked and a mixed content error will come, to use it over https use secure_asset like

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

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

小开

自从 Laravel5之后，HTML类在默认情况下就不再包含了。

如果您正在使用 Form 或 HTML 帮助程序，您将看到一个错误，说明类“ Form”未找到或类“ HTML”未找到。Form 和 HTML 助手在 Laravel 5.0中已经被弃用; 然而，有一些社区驱动的替代品，比如由 Laravel Collective 维护的那些。

You can make use of the following line to include your CSS or JS files:

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

Update for laravel 5.4 ----

所有的答案已经使用了 HTML 类的幼虫，但我猜测它已经贬值现在在幼虫5.4，所以 将您的 css 和 js 文件放在 public-> css/js 中 并在您的 html 中使用

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

For Laravel 5.4 and if you are using mix helper, use

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

将它们放在 public文件夹中，并在视图中用类似于 href="\{\{ asset('public/css/style.css') }}"的东西调用它。请注意，在调用资产时应该包含 public。

小开

那就把你的 CSS 放到公共文件夹里

add this in you blade file

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

To my opinion the best option to route to css & js use the following code:

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

因此，如果你在 css 文件夹的 public 文件夹中有一个名为 main.css 的 css 文件，它应该是这样的:

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

您可以简单地将所有文件放在其指定的文件夹中，如

公众人士/综合社会保障援助计划
Public/js
public/images

然后像普通的 html 那样调用这些文件
<link href="css/file.css" rel="stylesheet" type="text/css">

在任何一个版本的 Laravel 都行得通

小开

使用{ ! ! 在新的幼虫

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


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

对于那些由于各种原因需要将 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 和其他可浏览器呈现的东西做同样的事情


提交答案