Laravel 뷰에서 CSS를 사용하십니까?


108

방금 라 라벨을 배우기 시작했고 컨트롤러와 라우팅의 기본을 할 수 있습니다.

내 OS는 Mac OS X Lion이며 MAMP 서버에 있습니다.

route.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에 있었지만!

이것은 view 폴더 내의 기업의 index.php입니다.

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

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

다른보기 폴더 (테스트)에서 블레이드 템플릿 엔진을 사용하여 CSS를 표시하려고했지만 CSS가 테스트 폴더에 있음에도 불구하고 다시 표시되지 않았습니다!

이 프레임 워크를 천천히 배우면서 어떻게이 문제를 극복하고 더 나아질 수 있습니까?


어떤 laravel 버전을 사용하고 있습니까?
Black

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

2
블레이드를 사용하는 경우 @section 또는 기타 내부에서 CSS를 호출하지 마십시오.
star18bit

3
해당 구문이 작동하려면 블레이드를 사용해야합니다. blade를 사용하지 않는 경우 다음과 같이 가야합니다. <? php echo HTML :: style ( 'css / common.css');?>
Nicholas Kreidberg

6
이것은 켜 집 / html로 패키지가 더 이상 기본으로 포함되어 Laravel 5.0 지금 다른 laracasts.com/series/laravel-5-fundamentals/episodes/10 자세한 내용은
DANGEL

1
이것이 당신에게 효과가 없다면, 여기 저에게 효과가있는 것이 있습니다 : stackoverflow.com/questions/15232600/…
Dan Klos

1
나에게도 작동하지 않습니다. 치명적인 오류 : 'HTML'클래스를 찾을 수 없음
geoidesic

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

URL : 자산 () 내장되어 HTML이 :: 스타일 () 패키지를 필요로하는 반면
omarjebari

이 코드를 호출 할 위치를 답변에 추가해 주 {{ URL::asset('js/scrollTo.js'); }}시겠습니까? 예를 들어 줄 수 있습니까?
Ramesh Pareek 17.06.26

43

css 파일은 공용 폴더 또는 하위 폴더에 속합니다.

당신이 당신의 CSS를 넣으면 fe

public/css/common.css

당신은 사용할 것입니다

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

블레이드보기에서 ...

또는 자산 클래스 http://laravel.com/docs/views/assets ...를 사용할 수도 있습니다 .


아니, 이것은 차이가 없습니다. 나는 브라우저를 통해 액세스 아무것도 ... 그 디렉토리에 포함 할 수없는
dcolumbus

@dcolumbus 수신중인 404가 Laravel에서 생성 된 경우 (즉, 서버 기본값이 아님) .htaccess에 다음 줄이 누락 될 수 있습니다 (Apache를 사용한다고 가정) : "RewriteCond % {REQUEST_FILENAME}! -에프". 그 라인은 index.php가있는 라인 위에 있어야하며, 파일 시스템에 존재하는 경로에 대한 요청이 라 라벨의 라우팅 시스템에 의해 처리되는 것을 방지합니다. 수신 된 404가 Laravel에 의해 생성되지 않은 경우 .htaccess를 처리하려면 Apache 구성에 "AllowOverride All"을 추가해야합니다 (자세한 내용은 Apache 문서 참조).
tjbp

그는 공용 폴더, asset () 및 HTML :: style / HTML :: script가 아닌보기 폴더 내부에 CSS 파일을 배치하고 싶다고 말했습니다. 보안 목적으로 외부 문제에 의해 액세스됩니다. 따라서 index.php가 있든 없든 그가 원하는 것이 중요하지 않습니다.
Bryan P

26

평상시처럼 간단한 링크 태그를 작성한 다음 href 속성에서 다음을 사용할 수도 있습니다.

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

물론 css 파일을 public / css 아래에 넣어야합니다.


@dcolumbus (404)는 어쩌면 잘못된 경로를 제공하기 때문에, 접두사 / 공공 / laravel 기본 유무 접두사 / 공공 / /public/css/common.css 추가하려고
데이비드 발렌티노

23

다음과 같은 방법으로이를 수행 할 수 있습니다.

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

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

Laravel의 공용 폴더에서 스타일 파일을 검색 한 다음 렌더링합니다.


1
유 스타일 시트를 통해 연결할 경우 아마드 쿨, 그것을 잘 작동합니다 http <링크는 HREF = "{{{자산 ( '/ CSS /있는 style.css')}}}"확인해 = "스타일 시트를">하지만 사용하는 경우 https다음 요청이 차단되고 혼합 콘텐츠 오류가 발생합니다. https를 통해 사용하려면 secure_asset<link href = "{{{secure_asset ( '/ css / style.css')}}}"rel = "stylesheet"와 같이 사용해야합니다. > laravel.com/docs/5.1/helpers#method-secure-asset
Sambhav 펜디 교수

만 2 브라켓이 필요하다 -하지 (3)
올렉 Abrazhaev에게

laravel 5에이 솔루션을 사용하는 경우 LaravelCollective Forms & HTML 공급자를 설치해야합니다. 지침 은 laravelcollective.com/docs/5.4/html 을 참조하십시오 . composer.json을 업데이트 한 후 "작성기 업데이트"를 실행하는 것을 잊지 마십시오.
Asimov

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


2
3이 아닌 2 개의 괄호 만 필요합니다.
Radmation

내 CSS, js 파일을 어디에 두나요? 중 하나에 public/css또는resources/assets/css
NaveenDA

10

Laravel 5 이후 HTML클래스는 더 이상 기본적으로 포함되지 않습니다.

양식 또는 HTML 도우미를 사용하는 경우 'Form'클래스를 찾을 수 없거나 'Html'클래스를 찾을 수 없다는 오류가 표시됩니다. Form 및 HTML 도우미는 Laravel 5.0에서 더 이상 사용되지 않습니다. 그러나 Laravel Collective에서 유지 관리하는 것과 같은 커뮤니티 중심의 대체물이 있습니다.

다음 줄을 사용하여 CSS 또는 JS 파일을 포함 할 수 있습니다.

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

2
HTML 클래스가 더 이상 사용되지 않기 때문에 이것이 선호되는 방법으로 보이 므로이 답변이 더 높아야한다고 생각합니다.
Asimov

7

laravel 5.4 업데이트 ----

모든 답변은 laravel에 HTML 클래스를 사용했지만 이제 laravel 5.4에서 감가 상각되었다고 생각하므로 css 및 js 파일을 public-> css / js에 넣고 HTML에서 참조하십시오.

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

이 Laravel <링크 HREF = "CSS / common.css"확인해 = "스타일 시트"> 필요하지 css.common.css에서 잘 작동
Udhav Sarvaiya

5

그것은 불가능합니다 형제, Laravel은 모든 것이 공용 폴더에 있다고 가정합니다.

그래서 제 제안은 :

  1. 공용 폴더로 이동하십시오 .
  2. 가급적이면 css 라는 폴더를 만듭니다 .
  3. 각보기에 대한 폴더를 만들어 구성 할 수 있습니다.
  4. 해당 폴더 안에 각 CSS를 넣으면 더 쉬울 것입니다.

또는

정말로보기 폴더 안에 CSS를 넣어야한다고 주장한다면, 당신은 당신의 css 폴더 디렉토리에서 공개로 Symlink를 만들어 볼 수 있습니다. 폴더 {{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은 당신을 그렇게 사랑합니다.


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

4

css 파일을 공용 폴더에 넣습니다. (public / css / bootstrap-responsive.css) 및<link href="./css/bootstrap-responsive.css" rel="stylesheet">


훌륭합니다! 그러나, 사이에 차이가 <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에서 잘 작동합니다.


3

포함 할 css 또는 js 파일을 공용 폴더에 복사하거나 공용 / css 또는 공용 / 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()는 주어진 경로에 대한 정규화 된 URL을 생성하는 laravel 도우미 함수입니다.


3

CSS를 공용 폴더에 넣은 다음

이것을 블레이드 파일에 추가하십시오.

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

3

사용하다 {!! 새로운 라 라벨에서

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

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

2

Laravel 5.4의 경우 믹스 도우미를 사용하는 경우

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

2

에 넣어 public폴더와 같은 것을 함께보기에서 전화 href="{{ asset('public/css/style.css') }}". 이 있습니다 public당신은 자산을 호출 할 때 포함되어야한다.


"공용"폴더를 명시 할 필요가 없습니다. 예를 들어, 이것은 나를 위해 일했습니다. <link href = "{{asset ( 'css / bootstrap.min.css')}}"rel = "stylesheet">. 귀하의 예가 작동하지 않았습니다.
Isuru

2

어떤 이유로 든 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 및 브라우저에서 렌더링 할 수있는 기타 항목으로 동일한 작업을 수행 할 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.