Cách đưa tệp JS và CSS bên ngoài vào Laravel 5

Tôi đang sử dụng Laravel 5.0, Biểu mẫu và Trình trợ giúp Html bị xóa khỏi phiên bản này, tôi không biết cách đưa các tệp css và js bên ngoài vào tệp tiêu đề của mình. Hiện tại tôi đang sử dụng mã này.

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

Tôi nghĩ rằng cách đúng là cách này:

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

Ở đây tôi có một jsthư app/publicmục trong thư mục của laravel . Tôi có một jquery.jstập tin. Hàm URL :: asset () tạo url cần thiết cho bạn. Tương tự cho css:

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

Hi vọng điêu nay co ich.

Hãy nhớ rằng các mehods cũ:

{{ Form::script() }}

và

{{ Form::style() }}

không được dùng nữa và sẽ không hoạt động trong Laravel 5!

Thử nó.

Bạn chỉ có thể chuyển đường dẫn đến bảng định kiểu.

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

Bạn chỉ có thể chuyển đường dẫn đến javascript.

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

Thêm các dòng sau vào phần yêu cầu của tệp composer.json và chạy cập nhật trình soạn nhạc "Illuminium / html": "5. *" .

Đăng ký nhà cung cấp dịch vụ trong config / app.php bằng cách thêm giá trị sau vào mảng nhà cung cấp:

'Illuminate\Html\HtmlServiceProvider'

Đăng ký các mặt tiền bằng cách thêm hai dòng này vào mảng bí danh:

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

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

Vị trí thư mục nội dung nằm trong thư mục chung

Tôi sử dụng cách này, đừng quên đặt tệp css của bạn vào thư mục chung.

ví dụ, tôi đặt bootstrap css của tôi vào

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

để truy cập từ tiêu đề:

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

hy vọng điều này giúp đỡ

Đặt nội dung của bạn trong thư mục công khai và sử dụng những thứ sau

URL::to()

thí dụ

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

Lúc đầu, bạn phải đặt .csshoặc .jscác tệp của bạn trong publicthư mục của dự án của bạn. Bạn có thể tạo các thư mục con cho nó và di chuyển các tệp vào thư mục con. Sau đó, bạn phải làm như sau

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

Trong ví dụ của tôi, tôi đã tạo hai thư mục con có tên là css và js. Tôi đặt tất cả .cssvà .jscác tệp trong các thư mục tương ứng và sử dụng chúng ở bất cứ đâu tôi muốn. Cảm ơn bạn và hy vọng điều này sẽ giúp bạn.

Ok, vậy là tôi đã có thể tìm ra phiên bản 5.2. Trước tiên, bạn sẽ cần tạo thư mục tài sản trong thư mục chung của mình, sau đó đặt thư mục css và tất cả các tệp css vào đó, sau đó liên kết nó như sau:

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

Hy vọng rằng sẽ giúp!

Laravel 5.5 đi kèm với hỗn hợp, sự thay thế cho Elixir, css bên ngoài (sass) có thể được trích xuất vào resource / asset / css (sass) và nhập vào app.css (scss) hoặc cung cấp đường dẫn chính xác đến thư mục node_module của bạn có chứa thư viện và có thể được sử dụng như

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

Điều tương tự cũng có thể được thực hiện đối với Javascript.

Trước tiên, bạn phải cài đặt lớp trợ giúp Illuminate Html:

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

Tiếp theo, bạn cần mở /config/app.php và cập nhật như sau:

'providers' => [

...

Illuminate\Html\HtmlServiceProvider::class,
],

'aliases' => [

...

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

Để xác nhận nó đang hoạt động, hãy sử dụng lệnh sau:

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

Để đưa css bên ngoài vào tệp của bạn, hãy sử dụng cú pháp sau:

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

CÁCH ĐÚNG & BẢO MẬT

Nếu bạn có tệp bên ngoài .csshoặc .jstệp để thêm vào trang của mình!

Phiên bản của tôi: Laravel Framework 5.7

Nếu bạn muốn thêm .jstệp Bên ngoài ..

1. Sao chép mã bên ngoài của bạn.
2. Chạy lệnh npm installtrong thiết bị đầu cuối của bạn.
3. Khi lệnh trên được thực thi, bạn có thể thấy một thư mục có tên node_modules.
4. Sau đó, truy cập tài nguyên / js .
5. Mở tệp app.js.
6. Cuộn xuống dưới cùng và dán JS bên ngoài của bạn.
7. Cuối cùng chạy lệnh npm run devtrong thiết bị đầu cuối của bạn.

tập lệnh của bạn sẽ được cập nhật và nó được biên dịch và chuyển sang public/js/app.js. bằng cách thêm .jstệp trong thư mục chung sẽ không ảnh hưởng đến trang của bạn.

Nếu bạn muốn thêm .csstệp Bên ngoài ..

1. Sao chép kiểu bên ngoài của bạn.
2. Chạy lệnh npm installtrong thiết bị đầu cuối của bạn.
3. Khi lệnh trên được thực thi, bạn có thể thấy một thư mục có tên node_modules.
4. Sau đó, truy cập tài nguyên / sass .
5. Mở tệp app.scss.
6. Cuộn xuống dưới cùng và dán Kiểu bên ngoài của bạn.
7. Cuối cùng chạy lệnh npm run devtrong thiết bị đầu cuối của bạn.

tập lệnh của bạn sẽ được cập nhật và nó được biên dịch và chuyển sang public/css/app.css. bằng cách thêm .csstệp trong thư mục chung sẽ không ảnh hưởng đến trang của bạn.

• Cách dễ nhất và an toàn nhất để thêm .css và .js bên ngoài của bạn.

Laravel JavaScript & CSS giàn giáo

Nội dung biên dịch trên YouTube

Tôi có thể đến muộn với bữa tiệc nhưng thật dễ dàng để bao gồm JS và CSS theo cách Laravel bằng cách sử dụng hàm property ()

ví dụ <link rel="stylesheet" href="{{ asset('css/app.css') }}" />

Hy vọng điều đó sẽ giúp

Tôi đã và đang sử dụng

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

Có nhiều cách để bao gồm các tệp css và js bên ngoài như được chỉ định trong mã bên dưới nhưng bạn có thể chọn một trong số chúng, tôi đã thử nghiệm tất cả chúng, chúng hoạt động giống nhau.

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

Có thể có nhiều cách để tải nó.

nhưng hãy nhớ rằng nếu bạn đang tải css và js từ một thư mục công cộng thì tốt hơn nên sử dụng Laravel mix.