How to add CSS to Laravel

Add CSS to Laravel: example of how to use Blade syntax & Laravel Mix to quickly style your app.

Adding CSS to Laravel

CSS is a powerful styling language used to create visually appealing websites and applications. In Laravel, it is possible to add CSS to your project in a few different ways. In this tutorial, we will explore the different options available and show an example of how to use them.

The most straightforward way to add CSS to your Laravel project is to use the @css blade directive in your view files. This directive allows you to include a CSS file that is located in your project's public directory. For example, if you had a file called style.css in the public/css directory, you could include it in your view like this:

@css('css/style.css')

Another option is to use a dedicated asset manager such as Laravel Mix. This asset manager makes it easy to compile, minify, and version your CSS files. To use Laravel Mix, you will first need to install the node dependencies by running npm install from your project's root directory. Then, you can create your CSS files and add them to your webpack configuration. For example, if you had a file called style.scss in the resources/assets/css directory, you could add it to your webpack configuration like this:

mix.sass('resources/assets/css/style.scss', 'public/css');

Finally, you can also add CSS directly to your view files. This is not recommended as it can lead to a messy codebase, but it can be useful for quickly testing out an idea. For example, if you wanted to add a background color to a div, you could do it like this:

My div

As you can see, there are a few different ways to add CSS to your Laravel project. Depending on your needs, one of these methods may be a better fit than the others. Whichever method you choose, make sure to keep your code organized and easy to maintain.