CODEWITHSUNDEEP
php.htaccesslaravellaravel-5
Josh L. Minga
Josh L. Minga

Reputation: 135

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

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

Upvotes: 2

Views: 37089

Answers (6)

CodeToLife
CodeToLife

Reputation: 4141

In my case me looked upper of the place dropped the error. I found me has missed a " ' " character in a same looked declaration:

<script src="{{asset('js/bootstrap.min.js)}}"></script>

somewhere up there. As you can see there missed character " ' " after ".js" So that all underneath declarations havent " ' " pair until this error place

Upvotes: 0

Josh L. Minga
Josh L. Minga

Reputation: 135

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

Upvotes: 1

user4294557
user4294557

Reputation:

You can use laravel blade template method

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

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

Note :you should add css files into public folder means in my example it will be like public/css folder. same will be applied to jquery files also.

also you can add following way if you are using online links

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

or else

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

Upvotes: 3

Naing Win
Naing Win

Reputation: 1256

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

Upvotes: 1

ARIF MAHMUD RANA
ARIF MAHMUD RANA

Reputation: 5166

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)

Upvotes: 1

mdamia
mdamia

Reputation: 4557

try this and replace css with your folder name.

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

Upvotes: 2

Related Questions