Laravel stylesheets and javascript don t load for non-base routes

Question

Okay--I know this is a really elementary issue  but I can t figure it out  This is a question regarding Laravel   Basically  I have my stylesheets embedded in my default layout view  I m currently just using regular css to link them  such as    lt link rel  stylesheet  href  css app css    gt    It works great when I am at a single level route such as  about  but stops working when I go deeper  such as  about me   If I look at Chrome s developer console I see some of the following errors  only for the deeper routes    Resource interpreted as Stylesheet but transferred with MIME type text html   http   example dev about css app css     So clearly it is now looking for the css inside the  about  folder--which of course isn t a folder at all   I just want it to look in the same place for the assets regardless of the route

User · Answer

Suppose you have not renamed your public folder  Your css and js files are in css and js subfolders in public folder  Now your header will be      lt link rel  stylesheet  type  text css  href   public css icon css   gt   lt script type  text javascript  src   public js jquery easyui min js  gt  lt  script gt

User · Answer

Better way to use like    lt link rel  stylesheet  href    asset  assets libraries css app css      gt

User · Answer

Laravel 4  The better and correct way to do this  Adding CSS  HTML  style will link to your project public  folder     HTML  style  css bootstrap css        Adding JS  HTML  script will link to your project public  folder     HTML  script  js script js

User · Answer

Laravel 5 4 with mix helper    lt link href     mix   css app css       rel  stylesheet  gt   lt script src     mix   js app js       gt   lt  script gt

User · Answer

If you re using Laravel 3 and your CSS JS files inside public folder like this  public css public js   then you can call them using in Blade templates like this     HTML  style  css style css          HTML  script  js jquery-1 8 2 min js

User · Answer

in laravel 4 you just have to paste    URL  asset         this way        lt link rel  stylesheet  href     URL  asset        css app css    gt     It is the same for      lt script language  JavaScript  src     URL  asset        js jquery js  gt  lt  script gt     lt img src     URL  asset        img image gif  gt

User · Answer

Best way in my opinion add BASE tag in your HTML   lt base href     target   top  gt    So it s not necessary to use things like      HTML  script  js jquery jquery-1 11 1 min js         just type   lt script src  js jquery jquery-1 11 1 min js  gt  lt  script gt    in your view and it will works   This mehod will deal with RESTful URLs and static resources as images  css  scripts

User · Answer

put your script file in public directory then use for example for userFunctions js    lt script type  text javascript  src    asset  js userFunctions js      gt

User · Answer

in Laravel 5  there are 2 ways to load a js file in your view first is using html helper  second is using asset helpers  to use html helper you have to first install this package via commandline   composer require illuminate html   then you need to reqister it  so go to config app php  and add this line to the providers array   Illuminate Html HtmlServiceProvider    then you have to define aliases for your html package so go to aliases array in config app php and add this   Html        gt   Illuminate Html HtmlFacade    now your html helper is installed so in your blade view files you can write this       Html  script  js test js         this will look for your test js file in your project root public js test js                                                                 to use asset helpers instead of html helper  you have to write sth like this in your view files    lt script src     URL  asset  test js       gt  lt  script gt    this will look for test js file in project root resources assets test js

User · Answer

i suggest you put it on route filter before on  project  application routes php  Route  filter  before   function            Do stuff before every request to your application            Asset  add  jquery    js jquery-2 0 0 min js        Asset  add  style    template style css        Asset  add  style2    css style css           and using blade template engine     Asset  styles         Asset  scripts         or more on laravel managing assets docs

User · Answer

In Laravel 5 8   lt script src    asset  js customPath1 customPath2 customjavascript js      gt  lt  script gt    just made the trick for me

User · Answer

Just Add Another Issue   If you want to remove  public from your project using  htaccess    then you can use this   Add public before  css inside asset      lt link href     asset  public css app css       rel  stylesheet  gt     Sometimes  it is useful

User · Answer

The better and correct way to do this    lt link rel  stylesheet  href     asset  assets css bootstrap min css       gt

User · Answer

For Laravel 4      for a double curly brace      and for Laravel 5  amp  above version  you may replace     by    and     by    in higher-end version  If you have placed JavaScript in a custom defined directory   For instance  if your jQuery-2 2 0 min js is placed under the directory resources views admin plugins js  then from the   blade php you will be able to add at the end of the section as   lt script src      asset  resources views admin plugins js jQuery-2 2 0 min js        gt  lt  script gt    Since Higher-End version supports Lower-End version also and but not vice-versa

User · Answer

If you do hard code it  you should probably use the full path  href  http   example com public css app css     However  this means you ll have to manually adjust the URLs for development and production   An Alternative to the above solutions would be to use  lt link rel  stylesheet  href  URL  to asset  css app css      gt  in Laravel 3 or  lt link rel  stylesheet  href  URL  asset  css app css      gt  in Laravel 4   This will allow you to write your HTML the way you want it  but also let Laravel generate the proper path for you in any environment

User · Answer

In Laravel 5 7  put your CSS or JS file into Public directory   For CSS    lt link rel  stylesheet  href     asset  bootstrap min css       gt    For JS    lt script type  text javascript  src     asset  bootstrap js       gt  lt  script gt

User · Answer

For Laravel 4  amp  5    lt link rel  stylesheet  href     URL  asset  assets css bootstrap min css       gt    URL  asset will link to your project public  folder  so chuck your scripts in there   Note  For this  you need to use the  Blade templating engine   Blade files use the  blade php extension

User · Answer

You are using relative paths for your assets  change to an absolute path and everything will work  add a slash before  css     lt link rel  stylesheet  href   css app css    gt

User · Answer

Vinsa almost had it right  you should add     lt base href    URL  asset         target   top  gt    and scripts should go in their regular path    lt script src  js jquery jquery-1 11 1 min js  gt  lt  script gt    the reason for this is because Images and other things with relative path like image source or ajax requests won t work correctly without the base path attached

[php] Laravel stylesheets and javascript don't load for non-base routes

Examples related to php

Examples related to laravel

Examples related to blade