Laravel Access css and js file from resources css and js directory

Question

This is my directory structure.

-resources
  -css
    -mycss.css
  -js
    -myjs.js
  -myimagesfolder
  -views
    -admin
      -home.blade.php

how can i access resources>css>mycss.css , resources>js>myjs.js and resources>mymagesfolder>images in my views>admin>home.blade.php.

Duello

You need to store your publicly available files and folders under the public folder and then you can use the asset() helper method to generate. E.g. in your blade file use, <img src="{{ asset('images/logo.png') }} /> – Akan

@OMiShah and css and Js? – Duello

Answer 1

Put your css and js file inside public folder like this:

-public
  -css
    -mycss.css
  -js
    -myjs.js

Now you can access your files like this.Putthis below line of code inside head tag

For css

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

For Js

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

Understanding

Answer 2

According to Laravel official documents link, files under /resources/css, /resources/js need be compiled before use.

Peaslee

compiled as in... doing what exactly? npm install / npm run dev ? – Garay

Answer 3

You can compile files in resources/css resources/js with Laravel mix.

For myjs.js, add to webpack.mix.js file the line: mix.js('resources/js/myjs.js', 'public/js'); For mjcss.css, add to webpack.mix.js file the line: mix.postCss('resources/mycss.css', 'public/css');

Both myjs.js and mycss.css will be compiled to public/js and public/css respectively when you run npm run dev

Remember to include the minified js and css files in your app.blade.php

<script src="{{ asset('js/myjs.js') }}" defer></script>

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

Balduin

Answer 4

Please move all your public files to the public folder:

-public
  -css
    -mycss.css
  -js
    -myjs.js
-resources
  -myimagesfolder
  -views
    -admin
      -home.blade.php

then import them as follow:

<link rel="stylesheet" href="{{asset('css/mycss.css')}}"> ## CSS
<script src="{{asset('js/myjs.js')}}"></script> ## JS

Best of luck!

Process