Laravel 5: adding custom styles/scripts

Question

This is kind of a stupid question, and I've looked around for similar answers and found some, however they are a bit more specific than what I am asking.

Say I want to include a custom styles.css or scripts.js file, would I just create a css/js folder in resources/views folder, and then call to them in my blade.php files like I would normally do in an HTML file when not using Laravel?

Example: <link type="text/css" rel="stylesheet" href="css/styles.css">

Or is there a different approach to this in Laravel?

The way I said works, but they do have some more complicated asset managers to deal with things, depending on the complexity of your application, so you may want to look into those first. — Evadecaptcha
– Evadecaptcha, Commented Jul 30, 2015 at 14:30

Pᴇʜ · Accepted Answer · 2015-07-30 14:37:01Z

22

Put your css files into the public folder like public/css/styles.css

Use the asset() function to add css, javascript or images into your blade template.

For Style Sheets

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

or

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

For Javascript

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

or

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

You may also be interested to have a look at Laravel's Elixir to process your styles and javascript.

edited Jul 30, 2015 at 14:37

answered Jul 30, 2015 at 14:31

Pᴇʜ

57.9k10 gold badges55 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lansana Camara Over a year ago

What's the difference between asset and URL::asset?

Pᴇʜ Over a year ago

one is shorter than the other ;) The asset() function is a helper and shorter than using the laravel facade URL::asset(). The result is the same. It's a personal preference thing I guess.

CIZO · Accepted Answer · 2015-07-30 14:41:06Z

1

put your style.css file in inside css folder named: /css AND your js file inside js folder named: /jsput below code in your html file.

Your css files

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

And js files

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

answered Jul 30, 2015 at 14:41

CIZO

4,1671 gold badge25 silver badges25 bronze badges

Collectives™ on Stack Overflow

Laravel 5: adding custom styles/scripts

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related