php - 在 Laravel 视图中使用 CSS？

Question

我刚刚开始学习 Laravel，并且可以做控制器和路由的基础知识。

我的操作系统是 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 中！

这是视图文件夹中企业的 index.php：

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

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

我尝试在我的其他视图文件夹（测试）中使用 Blade 模板引擎来显示 CSS，但是尽管它位于测试文件夹中，但 CSS 仍然没有显示！

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

score 163 · Accepted Answer

将您的资产放在公共文件夹中；例如：

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

此语法将自动生成正确的路径（例如，`public/js/scrollTo.js'）。

score 42 · Accepted Answer

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

fe如果你把你的css放进去

public/css/common.css

你会用

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

在您的刀片视图中...

或者您也可以使用资产类http://laravel.com/docs/views/assets ...

score 28 · Accepted Answer

您也可以像往常一样编写一个简单的链接标签，然后在 href attr 上使用：

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

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

score 25 · Accepted Answer

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

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

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

它将在 Laravel 的公共文件夹中搜索样式文件，然后将其渲染。

score 16 · Accepted Answer

就像 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

score 12 · Accepted Answer

从 Laravel 5 开始HTML，默认情况下不再包含该类。

如果您使用表单或 HTML 帮助程序，您将看到一个错误，指出未找到类“表单”或未找到类“Html”。Laravel 5.0 中已弃用 Form 和 HTML 助手；但是，有一些社区驱动的替代品，例如由 Laravel Collective 维护的替代品。

您可以使用以下行来包含您的 CSS 或 JS 文件：

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

score 7 · Accepted Answer

laravel 5.4 更新 ----

所有答案都使用了 laravel 的 HTML 类，但我想它现在在 laravel 5.4 中已经被贬值了，所以把你的 css 和 js 文件放在 public->css/js 并在你的 html 中引用它们

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

score 6 · Accepted Answer

在我看来，路由到 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') }}">

score 6 · Accepted Answer

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

公共/css
公共/js
公共/图像

然后就像在普通的html中一样调用文件
<link href="css/file.css" rel="stylesheet" type="text/css">

它适用于任何版本的 Laravel

score 5 · Accepted Answer

这是不可能的兄弟，Laravel 假设所有内容都在公共文件夹中。

所以我的建议是：

转到公用文件夹。
创建一个文件夹，最好命名为css。
为各个视图创建文件夹以使事情井井有条。
将相应的 css 放在这些文件夹中，这对您来说会更容易。

或者

如果你真的坚持要把css放在views文件夹中，你可以尝试从你的css文件夹目录中创建Symlink（你是mac，所以没关系，但对于windows，这只适用于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 非常爱你。

score 4 · Accepted Answer

将您的 css 文件放在公共文件夹中。(public/css/bootstrap-responsive.css) 和<link href="./css/bootstrap-responsive.css" rel="stylesheet">

score 3 · Accepted Answer

利用 {！！在新的 laravel 中

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

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

score 3 · Accepted Answer

将要包含的 css 或 js 文件复制到 public 文件夹，或者您可能希望将它们存储在 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。

score 3 · Accepted Answer

把你的CSS放在公共文件夹中，然后

在你的刀片文件中添加这个

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

score 2 · Accepted Answer

对于那些出于任何原因需要将 js/css 保留在公共文件夹之外的人，在现代 Laravel 中，您可以使用sub-views。说你的观点结构是

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>

js这将告诉 Laravel 和您的代码编辑器，这些实际上是css文件。您可以对其他 HTML、SVG 和其他可浏览器呈现的内容执行相同操作

score 2 · Accepted Answer

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

score 2 · Accepted Answer

对于 Laravel 5.4，如果您使用的是混合助手，请使用

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

php - 在 Laravel 视图中使用 CSS？

17 回答 17

Related

Reference