Usando CSS nas visualizações do Laravel?

108

Acabei de começar a aprender o Laravel e posso fazer o básico de um controlador e roteamento.

Meu SO é o Mac OS X Lion e está em um servidor MAMP.

Meu código 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>";
});

Isso funciona, as visualizações exibem perfeitamente, '' entretanto '' o que eu quero tentar fazer é incluir CSS dentro das visualizações, eu tentei adicionar um link para uma folha de estilo dentro do diretório, mas a página a exibiu como a fonte padrão do navegador até embora o css estivesse no HTML!

Este é index.php de empresas na pasta de visualizações:

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

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

Tentei usar o mecanismo de modelo Blade em minha outra pasta de visualizações (teste) para exibir CSS, mas novamente o CSS não apareceu, apesar de estar na pasta de teste!

Como posso superar esse problema e melhorar - enquanto estou aprendendo lentamente esta estrutura.

php frameworks laravel

— avenas8808
fonte

Qual versão de laravel você está usando?

— Preto de

5

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

— vishalknishad

156

Coloque seus ativos na pasta pública

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

E eles chamaram usando o Laravel

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

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

— Fernando Montoya
fonte

2

Não chame CSS dentro de @section ou qualquer coisa, se você estiver usando blade, funcionou para mim!

— star18bit

3

Você tem que usar o blade para que a sintaxe funcione. Se você não estiver usando o blade, então você terá que ir com: <? Php echo HTML :: style ('css / common.css');?>

— Nicholas Kreidberg

6

Isso é diferente agora para o Laravel 5.0, onde o pacote illuminate / html não está mais incluído por padrão laracasts.com/series/laravel-5-fundamentals/episodes/10 para detalhes

— dangel

1

Se isso não funcionar para você, aqui está o que funcionou para mim: stackoverflow.com/questions/15232600/…

— Dan Klos

1

Não funciona para mim também. Erro fatal: Classe 'HTML' não encontrada

— geoidesic

56

Coloque seus ativos na pasta pública

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

E então chamei usando o 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

— Desenvolvedor-chefe
fonte

URL :: asset () é integrado, enquanto HTML :: style () requer um pacote

— omarjebari

Você pode adicionar à sua resposta para onde chamar este código {{ URL::asset('js/scrollTo.js'); }}? Você pode dar um exemplo?

— Ramesh Pareek

43

seu arquivo css pertence à pasta pública ou a uma subpasta dela.

fe se você colocar seu css em

public/css/common.css

você usaria

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

Em sua visão da lâmina ...

Ou você também pode usar a classe Asset http://laravel.com/docs/views/assets ...

— André Keller
fonte

Nah, isso não faz diferença. Não consigo acessar nada através do navegador contido nesses diretórios ...

— dcolumbus

@dcolumbus Se o 404 que você está recebendo for gerado pelo Laravel (ou seja, não o padrão do servidor), então pode estar faltando a seguinte linha em seu .htaccess (presumindo que você esteja usando Apache): "RewriteCond% {REQUEST_FILENAME}! -f ". Essa linha deve ficar acima daquela com index.php nele, e irá prevenir que requisições para caminhos que existem no sistema de arquivos sejam manipulados pelo sistema de roteamento do Laravel. Se o 404 recebido não for gerado pelo Laravel, você precisa adicionar "AllowOverride All" à sua configuração do Apache para que o .htaccess seja processado (veja a documentação do Apache para mais informações).

— tjbp de

Ele disse que deseja colocar os arquivos css dentro da pasta de visualização, não na pasta pública, asset () e HTML :: style / HTML :: script todos apontam para o diretório público, o laravel não permite que nada dentro da pasta do App seja acessado por assuntos externos para fins de segurança. Portanto, mesmo se houver index.php ou não, não importa o que ele deseja.

— Bryan P,

26

Você também pode escrever uma tag de link simples como faria normalmente e, em seguida, usar o atributo href:

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

claro que você precisa colocar seu arquivo css em public / css

— Diego castaño
fonte

@dcolumbus 404 talvez porque forneceu o caminho errado, tente adicionar prefixo / public /, o padrão laravel tem prefixo / public / /public/css/common.css

— david valentino

23

Podemos fazer isso da seguinte maneira.

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

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

Ele irá pesquisar o arquivo de estilo na pasta pública do Laravel e então irá renderizá-lo.

— Ahmad Sharif
fonte

1

Legal Ahmad, funcionará bem se você vincular a folha de estilo sobre http <link href = "{{{asset ('/ css / style.css')}}}" rel = "stylesheet">, mas se você estiver usando https, a solicitação será bloqueada e ocorrerá um erro de conteúdo misto, para usá-lo em https você deve usar secure_assetcomo <link href = "{{{secure_asset ('/ css / style.css')}}}" rel = "stylesheet" > laravel.com/docs/5.1/helpers#method-secure-asset

— Sambhav Pandey

Apenas 2 colchetes são necessários - não 3.

— Oleg Abrazhaev

Se você usar esta solução para o laravel 5, você precisa instalar o provedor LaravelCollective Forms & HTML. Consulte: laravelcollective.com/docs/5.4/html para obter instruções. Não se esqueça de executar "composer update" após atualizar composer.json.

— Asimov

15

Como Ahmad Sharif mencionou, você pode vincular a folha de estilo http

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

mas se você estiver usando https, a solicitação será bloqueada e um erro de conteúdo misto virá, para usá-lo em https use secure_assetcomo

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

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

— Sambhav Pandey
fonte

2

Apenas 2 colchetes são necessários - não 3.

— Radmation de

Onde coloco meu arquivo css, js? em public/cssouresources/assets/css

— NaveenDA

10

Desde o Laravel 5, a HTMLclasse não é mais incluída por padrão.

Se você estiver usando auxiliares de formulário ou HTML, verá um erro informando a classe 'Formulário' não encontrado ou a classe 'Html' não encontrada. Os helpers Form e HTML estão obsoletos no Laravel 5.0; no entanto, existem substitutos voltados para a comunidade, como aqueles mantidos pelo Coletivo Laravel.

Você pode usar a seguinte linha para incluir seus arquivos CSS ou JS:

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

— Bono
fonte

2

Acho que essa resposta deveria ser mais alta porque parece ser a forma preferida, já que a classe HTML está obsoleta.

— Asimov

7

Atualização para laravel 5.4 ----

Todas as respostas usaram a classe HTML para laravel, mas acho que ela foi depreciada agora no laravel 5.4, então coloque seus arquivos css e js em public-> css / js e faça referência a eles em seu html usando

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

— Eminem347
fonte

Isso está funcionando bem no Laravel <link href = "css / common.css" rel = "stylesheet"> css.common.css não é necessário

— Udhav Sarvaiya

5

Isso não é possível mano, o Laravel assume que está tudo em pasta pública.

Então, minha sugestão é:

Vá para a pasta pública .
Crie uma pasta, de preferência com o nome css .
Crie a pasta para as respectivas visualizações para tornar as coisas organizadas.
Coloque o respectivo css dentro dessas pastas, isso seria mais fácil para você.

Ou

Se você realmente insiste em colocar css dentro da pasta de visualizações, você pode tentar criar Symlink (você é Mac, então está tudo bem, mas para Windows, isso só funcionará para Vista, Server 2008 ou superior) de seu diretório de pasta css para o público pasta e você pode usar {{HTML::style('your_view_folder/myStyle.css')}}dentro de seus arquivos de visualização, aqui está um código para sua conveniência, no código que você postou, coloque-os antes de 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);

Se você realmente deseja tentar realizar sua ideia, tente isto:

<link rel="stylesheet" href="<?php echo app_path() . 'views/your_view_folder/myStyle.css'?>" type="text/css">

Mas não funcionará mesmo se o diretório do arquivo estiver correto porque o Laravel não fará isso por questões de segurança, o Laravel ama você muito.

— Bryan P
fonte

5

Na minha opinião, a melhor opção para rotear para css e js é o seguinte código:

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

Portanto, se você tiver um arquivo css chamado main.css dentro da pasta css na pasta pública, deve ser o seguinte:

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

— kqcreations
fonte

4

coloque seu arquivo css em uma pasta pública. (public / css / bootstrap-responsive.css) e<link href="./css/bootstrap-responsive.css" rel="stylesheet">

— Huuthang
fonte

Incrível, funciona! Mas, há alguma diferença entre <link href="./css/bootstrap-responsive.css" rel="stylesheet">e<link href="{{ url('/') }}./css/bootstrap-responsive.css" rel="stylesheet">

— Gregordy

4

Você pode simplesmente colocar todos os arquivos em sua pasta especificada em público, como

public / css
public / js
public / images

Em seguida, basta chamar os arquivos como em html normal, como
<link href="css/file.css" rel="stylesheet" type="text/css">

Funciona bem em qualquer versão do Laravel

— Suzan
fonte

3

Copie o arquivo css ou js que deseja incluir para a pasta pública ou armazene-os em pastas públicas / css ou públicas / js.

Por exemplo. você está usando o arquivo style.css da pasta css no diretório público, então você pode usar

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

Mas no Laravel 5.2 você terá que usar

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

e se você quiser incluir arquivos javascript da pasta public / js, é bastante simples também

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

e no Laravel 5.2 você terá que usar

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

a função url()é uma função auxiliar laravel que irá gerar uma URL totalmente qualificada para um determinado caminho.

— Akshay Khale
fonte

3

coloque seu css na pasta pública, então

adicione isso em seu arquivo blade

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

— Saengdaet
fonte

3

Usar {!! em novo laravel

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

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

— TARUN SHARMA
fonte

2

Para o Laravel 5.4 e se você estiver usando o mix helper, use

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

— Gsub
fonte

2

Coloque-os na publicpasta e coloque-os na visualização com algo parecido href="{{ asset('public/css/style.css') }}". Observe que o publicdeve ser incluído quando você chama os ativos.

— Abaij
fonte

Não há necessidade de declarar pasta "pública". Por exemplo, isso funcionou para mim. <link href = "{{asset ('css / bootstrap.min.css')}}" rel = "stylesheet">. Seu exemplo não funcionou.

— Isuru

2

Para aqueles que precisam para manter js / css fora da pasta pública por qualquer motivo, em Laravel moderno você pode usar sub-visualizações . Digamos que sua estrutura de visualizações seja

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

em view1adição

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

em views-js.blade.phparquivos envolva seu código js na <script>tag

em views-css.blade.phpembrulhar seus estilos na <style>tag

Isso vai dizer ao Laravel, e ao seu editor de código, que aqueles são de fato jsecss arquivos. Você pode fazer o mesmo com HTML, SVGs e outras coisas que podem ser renderizadas por navegador

— Arthur Tarasov
fonte