在Laravel视图中使用CSS？

108

我刚刚开始学习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中！

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

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

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

我尝试在其他views文件夹（测试）中使用Blade模板引擎来显示CSS，但是即使CSS在测试文件夹中，CSS仍然没有显示！

当我慢慢学习这个框架时，如何克服这个问题并变得更好？

php frameworks laravel

— avenas8808
source

您什至使用哪个laravel版本？

— 黑色

5

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

— vishalknishad

156

将您的资产放在公用文件夹中

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

他们用Laravel称呼它

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

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

— 费尔南多·蒙托亚
source

2

不要在@section或其他任何东西中调用CSS，如果您使用的是Blade，对我有用！

— star18bit

3

您必须使用Blade才能使该语法起作用。如果您不使用刀片，则必须使用：<？php echo HTML :: style（'css / common.css'）;？>

— Nicholas Kreidberg 2014年

6

这是现在用于不同5.0 Laravel其中照射/ html包不再包含默认 laracasts.com/series/laravel-5-fundamentals/episodes/10对于细节

— dangel

1

如果这不适合你，这里是为我工作：stackoverflow.com/questions/15232600/...

— 丹KLOS

1

也不适合我。致命错误：未找到类“ HTML”

— 大地测量的

56

将您的资产放在公用文件夹中

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

然后用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

（要么）

{{ 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

— 首席开发人员
source

URL :: asset（）是内置的，而HTML :: style（）需要一个包

— omarjebari

您能否在答案中添加该代码的调用位置 {{ URL::asset('js/scrollTo.js'); }}？能给我举个例子吗？

— Ramesh Pareek

43

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

fe，如果您将CSS放入

public/css/common.css

你会用

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

在刀片视图中...

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

— 安德烈·凯勒
source

不，这没有关系。我无法通过那些目录中包含的浏览器访问任何内容...

— dcolumbus

@dcolumbus如果您收到的404是由Laravel生成的（即不是服务器的默认值），则您可能在.htaccess中缺少以下行（假设您使用的是Apache）：“ RewriteCond％{REQUEST_FILENAME}！ -F”。该行应该位于其中带有index.php的那一行的上方，这将防止Laravel的路由系统处理对文件系统中存在的路径的请求。如果收到的404不是由Laravel生成的，则需要在Apache配置中添加“ AllowOverride All”，以便处理.htaccess（有关更多信息，请参阅Apache文档）。

— 2013年

他说他想将css文件放在view文件夹内，而不是公共文件夹，asset（）和HTML :: style / HTML :: script都指向公共目录，laravel不允许将App文件夹内的任何内容出于安全目的，可以由外部事务访问。因此，即使有没有index.php，他想要什么也没关系。

— Bryan P

26

您还可以像平常一样编写一个简单的链接标记，然后在href属性上使用：

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

当然，您需要将css文件放在public / css下

— 迭戈·卡斯塔尼奥
source

@dcolumbus 404可能是因为给出了错误的路径，请尝试添加前缀/ public /，laravel默认具有前缀/ public / /public/css/common.css

— david valentino，

23

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

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

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

它将在Laravel的公用文件夹中搜索样式文件，然后将其呈现。

— 艾哈迈德·谢里夫（Ahmad Sharif）
source

1

酷艾哈迈德（Ahmad），如果您通过http <link href =“ {{{asset（'/ css / style.css'）}}}”“ rel =” stylesheet“> 链接样式表，它将很好用，但是如果您使用的https是请求将被阻止，并且将出现混合内容错误，要在https上使用它，您必须使用secure_asset<link href =“ {{{secure_asset（'/ css / style.css'）}}}”“ rel =” stylesheet“ > laravel.com/docs/5.1/helpers#method-secure-asset

— Sambhav Pandey

只有2个支架需要-没有3

— 奥列格Abrazhaev

如果您将此解决方案用于laravel 5，则需要安装LaravelCollective Forms＆HTML provider。有关说明，请参阅：laravelcollective.com/docs/5.4/html。更新composer.json后，请不要忘记运行“ composer update”。

— 阿西莫夫

15

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

— 桑巴夫·潘迪（Sambhav Pandey）
source

2

只需要2个支架-不需要3个支架

— 。– Radmation

我在哪里放置CSS，JS文件？无论是在public/css或resources/assets/css

— NaveenDA

10

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

如果您使用的是Form或HTML帮助器，则会看到一条错误消息，指出未找到“ Form”类或未找到“ Html”类。Laravel 5.0不推荐使用Form和HTML帮助器。但是，有一些由社区驱动的替代产品，例如Laravel集体维护的替代产品。

您可以利用以下行包含CSS或JS文件：

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

— 波诺
source

2

我认为这个答案应该更高，因为这似乎是首选方法，因为不推荐使用HTML类。

— 阿西莫夫

7

laravel 5.4的更新----

所有答案都使用了laravel的HTML类，但我想它现在在laravel 5.4中已被弃用，因此请将您的CSS和js文件放在public-> css / js中，并使用

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

— 阿姆347
source

这在Laravel中运行良好<link href =“ css / common.css” rel =“ stylesheet”> css.common.css不必要

— Udhav Sarvaiya

5

这是不可能的，Laravel假定一切都在公用文件夹中。

所以我的建议是：

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

要么

如果您真的坚持将css放在views文件夹中，则可以尝试从css文件夹目录创建public 创建的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非常爱您。

— 布莱恩·P
source

5

我认为路由到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') }}">

— kqcreations
source

4

将您的css文件放在公用文件夹中。（public / css / bootstrap-sensitive.css）和<link href="./css/bootstrap-responsive.css" rel="stylesheet">

— 虎塘
source

太棒了，它有效！但是，<link href="./css/bootstrap-responsive.css" rel="stylesheet">与<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

— Gregordy

4

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

公共/ CSS
公共/ JS
公共/图像

然后像正常的html一样调用文件
<link href="css/file.css" rel="stylesheet" type="text/css">

它在任何版本的Laravel中都可以正常工作

— 苏赞
source

3

将您要包括的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到给定的路径。

— 阿克塞·卡勒（Akshay Khale）
source

3

将您的CSS放在公用文件夹中，然后

将此添加到刀片文件中

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

— 盛大
source

3

用 {！！在新的laravel

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

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

— 塔伦·莎玛
source

2

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

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

— Gsub
source

2

将它们放在public文件夹中，然后在视图中使用诸如之类的名称 href="{{ asset('public/css/style.css') }}"。请注意，在public调用资产时应将包括在内。

— 阿拜吉
source

无需声明“公共”文件夹。例如，这对我有用。<link href =“ {{asset（'css / bootstrap.min.css'）}}” rel =“ stylesheet”>。您的示例无效。

— Isuru

2

对于出于任何原因需要将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>标签中包装您的样式

这会告诉Laravel，和你的代码编辑器，这些其实都是js和css文件。您可以对其他HTML，SVG和其他可通过浏览器呈现的内容进行相同的操作

— 亚瑟·塔拉索夫（Arthur Tarasov）
source