How to link external CSS and Script (assets) in Laravel 5.1 project

Question

Hi guys am new to Laravel and this is my first project to do in laravel, I had trouble linking my assets(CSS & Js) file on my views.. I did a research an found if I will use {{URL::asset('assets/plugins/bootstrap/css/bootstrap.min.css')}} in Laravel 5.1 it will work. I did succeed when it was just a single link, but when I add other links..

<link rel="stylesheet" href="{{URL::asset('assets/plugins/animate.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/plugins/line-icons/line-icons.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/plugins/parallax-slider/css/parallax-slider.css')}}">
<link rel="stylesheet" href="{{URL::asset('assets/css/custom.css')}}">

The server denied the access to all files in assets folder Access forbidden!. My .htaccess file code is..

<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
    Options -MultiViews
</IfModule>
RewriteEngine On

# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>

Question is if .htaccess file had a problem why when I put one asset link it accept? Or what is the proper way of linking the files? Am using XAMPP as my local server. *Guy I just learned Laravel yesterday so be easy on me... Thanks in advance

Solution 1

Thanks guys for a help I did solve my problem.

1. I went again at http://laravel.com/docs/5.1/helpers#method-asset
   • there I found they say $url = asset('img/photo.jpg'); will give me the url to my asset file.

2. So I Route...

   Route::get('check', function () {
   
   $url = asset('assets/css/headers/header-default.css');
   
   return $url;
   }); 
   

   I got the link http://localhost/Dentist/public/assets/css/headers/header-default.css

3. So i just violate the rule if there was any and I did this in my stylesheet.

<link rel="stylesheet" href="<?php echo $url = asset('assets/css/style.css'); ?>">

--> ** Apart from that you can do this **

{!!asset('assets/plugins/jquery/jquery.min.js')!!}

because as the said if you use blade, then there is no need of using <?php echo ; ?> command... so I replaced <?php echo $url = ; ?> with {!! asset('assets/css/...') !!} Make sure your files are in public/assets/ directory

Thanks all

Solution 2

try this and replace css with your folder name.

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

Solution 3

When adding assets it's best to use assets helper http://laravel.com/docs/5.1/helpers#urls

For external

<link rel="stylesheet" href="{{asset('//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')}}">

and also laravel ships with an htaccess file try replace it with yours https://github.com/laravel/laravel/blob/master/public/.htaccess

Also give correct permissions to your directories

Folders 755

Files 644

Apart from;

app/storage 777 (or 755 with owner as webserver user)

Solution 4

Use Laravel Collective HTML Package

After installed this package you can use like this

{!! Html::style('your/css/file.css') !!}
{!! Html::script('your/js/file.js') !!}
{!! Html::image('your/image/file.jpg') !!}

View more solutions