Laravel 5에 외부 CSS 및 JS 파일을 포함하는 방법

나는 Laravel 5.0을 사용하고 있으며 Form 및 Html Helper 가이 버전에서 제거되었습니다. 내 헤더 파일에 외부 CSS 및 JS 파일을 포함하는 방법을 모르겠습니다. 현재이 코드를 사용하고 있습니다.

<link rel="stylesheet" href="/css/bootstrap.min.css"> <!---  css file  --->
<script type="text/javascript" src="/js/jquery.min.js"></script>

나는 이것이 올바른 방법이라고 생각합니다.

<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>

여기 js에 laravel의 app/public폴더에 디렉토리가 있습니다. 거기에 jquery.js파일이 있습니다. URL :: asset () 함수는 필요한 URL을 생성합니다. CSS도 동일합니다.

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

도움이 되었기를 바랍니다.

오래된 방법은 다음과 같습니다.

{{ Form::script() }}

과

{{ Form::style() }}

더 이상 사용되지 않으며 Laravel 5에서 작동하지 않습니다!

시도 해봐.

스타일 시트에 경로를 전달할 수 있습니다.

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

javascript 경로를 전달할 수 있습니다.

{!! HTML::script('js/script.js') !!}

composer.json 파일 의 require 섹션에 다음 행을 추가하고 composer update "illuminate / html": "5. *"를 실행하십시오 .

제공자 배열에 다음 값을 추가하여 config / app.php 에 서비스 제공자를 등록하십시오 .

'Illuminate\Html\HtmlServiceProvider'

aliases 배열에 다음 두 줄을 추가하여 파사드를 등록합니다.

'Form'=> 'Illuminate\Html\FormFacade', 'HTML'=> 'Illuminate\Html\HtmlFacade'

laravel 5.1에서는

 <link rel="stylesheet" href="{{URL::asset('assets/css/bootstrap.min.css')}}">
 <script type="text/javascript" src="{{URL::asset('assets/js/jquery.min.js')}}"></script>

자산 폴더 위치가 공용 폴더 내에있는 경우

나는 이런 식으로 사용하므로 CSS 파일을 공용 폴더에 넣는 것을 잊지 마십시오.

예를 들어 부트 스트랩 CSS를

"root/public/bootstrap/css/bootstrap.min.css"

헤더에서 액세스하려면 :

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

이 도움을 바랍니다

자산을 공용 디렉토리에 배치하고 다음을 사용하십시오.

URL::to()

예

<link rel="stylesheet" type="text/css" href="{{ URL::to('css/style.css') }}">
<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>

{{ HTML::style('yourcss.css') }}
{{ HTML::script('yourjs.js') }}

처음에는 .css또는 .js파일을 public프로젝트 폴더에 넣어야합니다 . 하위 폴더를 생성하고 파일을 하위 폴더로 이동할 수 있습니다. 그런 다음 다음을 수행해야합니다.

<link rel="stylesheet" href="{{asset('css/your_css_file.css')}}">
<script src="{{asset('js/your_js_file.js')}}"></script>

내 예에서는 css와 js라는 두 개의 하위 폴더를 만들었습니다. 모든 .css및 .js파일을 해당 폴더에 넣고 원하는 곳에서 사용합니다. 감사합니다. 도움이 되었기를 바랍니다.

좋아, 나는 버전 5.2를 알아낼 수 있었다. 먼저 공용 폴더에 자산 폴더를 만든 다음 css 폴더와 모든 css 파일을 여기에 넣은 다음 다음과 같이 연결해야합니다.

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

도움이 되었기를 바랍니다.

Laravel 5.5에는 Elixir의 대체품 인 mix가 포함되어 있으며, 외부 css (sass)는 resources / assets / css (sass)로 추출하고 app.css (scss)로 가져 오거나 다음이 포함 된 node_module 폴더에 올바른 경로를 제공 할 수 있습니다. 라이브러리로 사용할 수 있습니다.

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

자바 스크립트도 마찬가지입니다.

먼저 Illuminate Html 도우미 클래스를 설치해야합니다.

composer require "illuminate/html":"5.0.*"

다음으로 /config/app.php를 열고 다음과 같이 업데이트해야합니다.

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

'Form' => Illuminate\Html\FormFacade::class, 
'HTML' => Illuminate\Html\HtmlFacade::class,
],

작동하는지 확인하려면 다음 명령을 사용하십시오.

php artisan tinker
> Form::text('foo')
"<input name=\"foo\" type=\"text\">"

파일에 외부 CSS를 포함하려면 다음 구문을 사용하십시오.

{!! HTML::style('foo/bar.css') !!}

정확하고 안전한 방법

페이지에 추가 할 외부 .css또는 .js파일 이있는 경우 !

내 버전 : Laravel Framework 5.7

외부 .js파일 을 추가하려면 ..

1. 외부 코드를 복사하십시오.
2. npm install터미널에서 명령 을 실행하십시오 .
3. 위의 명령을 실행하면라는 이름의 폴더를 볼 수 있습니다 node_modules.
4. 그런 다음 resources / js 로 이동하십시오 .
5. 파일 열기 app.js.
6. 아래로 스크롤 하여 External JS를 붙여 넣습니다 .
7. 마지막으로 npm run dev터미널에서 명령 을 실행 하십시오.

스크립트가 업데이트되고 컴파일되어 public/js/app.js. .js공용 폴더에 파일 을 추가하면 페이지에 영향을주지 않습니다.

외부 .css파일 을 추가하려면 ..

1. 외부 스타일을 복사하십시오.
2. npm install터미널에서 명령 을 실행하십시오 .
3. 위의 명령을 실행하면라는 이름의 폴더를 볼 수 있습니다 node_modules.
4. 그런 다음 resources / sass 로 이동하십시오 .
5. 파일 열기 app.scss.
6. 아래로 스크롤 하여 외부 스타일을 붙여 넣습니다 .
7. 마지막으로 npm run dev터미널에서 명령 을 실행 하십시오.

스크립트가 업데이트되고 컴파일되어 public/css/app.css. .css공용 폴더에 파일 을 추가하면 페이지에 영향을주지 않습니다.

• 외부 .css 및 .js를 추가하는 가장 쉽고 안전한 방법입니다.

Laravel JavaScript 및 CSS 스캐 폴딩

YouTube 컴파일 저작물

파티에 늦었을지 모르지만 간단히 asset () 함수를 사용하여 Laravel Way에 JS 및 CSS를 포함하는 것은 쉽습니다.

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

도움이되는 희망

나는 사용하고있다

<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script> 
for javascript and 
     <link rel="stylesheet" href="{{ URL::asset('css/main.css') }}">
for css, this points to the public directory, so you need to keep your css and js files there.

아래 코드에 지정된대로 외부 css 및 js 파일을 포함하는 방법에는 여러 가지가 있지만 그중 하나를 선택할 수 있으며 모두 테스트했으며 동일하게 작동합니다.

<link rel="stylesheet" href="{{ asset('css/stylesheet.css') }}" /><!--Recommended-->
<link rel="stylesheet" href="{{ URL::asset('css/somestylesheet.css') }}" />
<link rel="stylesheet" href="{{ URL::to('css/otherstylesheet.css') }}" />
<link rel="stylesheet" href="{{ url('css/anotherstylesheet.css') }}" />

로드하는 방법이 더있을 수 있습니다.

그러나 공용 폴더가 아닌 다른 곳에서 css 및 js를로드하는 경우 Laravel mix.