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

Viewed 16044

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.

3 Answers

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>

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

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">
Related