CSS doesn't load on one of my route/view

Question

I have a sub-view that extend my master-view, and for some reasons all my css doesn't seem to load only on that page. I extend them as usual like I normally do.

---

view show.blade.php

@extends('layouts.internal.master')
@section('content')

TESTING ... 

@stop

I notice, it only break on that route : /account/112

---

Any hints / suggestion on this will be much appreciated !

Answer 1

/account and /account/112 can not access same path in same way. Like if /account access a image like 'images/img/img.jpg' , /account/112 need to access it like '../images/img/img.jpg'. Its all about folder structure. Now for your problem you need to use asset like below (laravel 5 specific)

// if you have save css file at as root/public/css/main.css
{!! HTML::style('css/app.css') !!} 

remember to add to composer.json

 "illuminate/html": "5.*"

And to aliases

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

Point to be noted:

    {{asset('css/some.css')}}

this is for laravel4. you wont get it working in laravel 5.

Answer 2

Without seeing your file paths or how you are loading your CSS, it's very difficult for us to say but it sounds like your file paths are wrong.

There is a difference between these two:

<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="/css/app.css">

Note the forward slash.

The first one is relative to your current path. So, for example, if you're currently at http://localhost:8000/account/112, the first one is like saying http://localhost:8000/account/css/app.css, which is most likely unwanted behavior. The second one is relative to the root directory so it will always be http://localhost:8000/css/app.css, which is probably what you want to do.

Laravel also comes with helpers function like asset so if you decide to use that and do something like this:

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

It will generate an absolute URL / full path from your root URL. So, it'll generate something like this:

<link rel="stylesheet" href="http://localhost:8000/css/app.css">