Use CSS and JavaScript in Blade Views

If you're new to Laravel, Blade and the framework's file structure can be a bit confusing. But rest assured that it's really easy to use CSS and JavaScript in Blade views.

First of all, you could include the CSS or Javascript directly in the view, without including a file, though that's not recommended, so I will teach you how to include CSS and JavaScript files.

How to include CSS and JavaScript files in Blade views

First of all you have to make sure that you place the files in Laravel's public folder, because it's the only one accessible from outside the server.

So let's say we want to include one CSS and one JavaScript files. We will place them in public/css/style.css and public/js/script.js, though it's not mandatory to create a special directory for them, I would recommend to separate them if the project becomes more complex.

Now in order to include them in blade you will have to point to their location, which would be yourwebsite.com/css/style.css, but let's not hardcode it. So we're going to use Laravel's url() method, like this:

<link rel="stylesheet" src="{{ url('css/style.css') }}">
<script src="{{ url('js/script.js') }}"></script>

You can include them wherever you want and as many as you want without a problem.