Up until this point in Laravel Nuts and Bolts, we have been focusing on the back-end of our application. In this tutorial, I will be covering how to make our application look better. You may have noticed that it looks quite bland and boring up until this point.
I wanted to split the back-end portion of this series from the front-end. Reason being, is so those who just want to learn how to program using Laravel can do so unencumbered by anything related to the front-end.
In this tutorial, I will be explaining how to style our application with plain CSS, as well as the four most popular CSS frameworks (according to this dev.to article by ThemeSelection, written in December, 2020).
Please feel free to click the framework listed below that interests you to jump to it.
Table of Contents
Laravel doesn’t automatically compile and copy resources such as CSS files by default. You will either have to create asset directories and assets in the
public directory manually, or create a pipeline.
Laravel does however provide an easy way to build an asset pipeline, using Laravel Mix. Mix makes it simple to define Webpack build steps.
Mix is already defined in your project’s
package.json file when you create a fresh Laravel project. All you will need to do is install the NPM modules. Type the following command to install your project’s defined NPM modules, including Mix:
sail npm install
During development you can use this command to run all Mix tasks:
sail npm run dev
For building for a production environment, you can use this command to run all Mix tasks and minify the output of your resources:
sail npm run prod
If you were to use a CSS framework hosted at a content delivery network (CDN) such as Tailwind CSS, you will not need to run these commands as CDN files are not stored within your project.
All fresh Laravel projects will contain an
app.css file located in the
resources/css directory. Open this file. This is where our app’s styles will go.
While writing CSS styles, you can use the
sail npm run watch command to watch for changes to our stylesheets. What does “watching” mean? Watching for changes means that our resource files will be automatically packaged when we change anything in our resource files. When we change a resource file and save it, we can reload the page in our browser without typing
sail npm run dev each time. It’s a beautiful thing.
It’s worth noting, though, that Webpack might not detect changes to your files in some local development environments. If you find this command doesn’t work, try running this command instead:
npm run watch-poll
In part six of this series, the final part, we won’t be writing any code. Rather, I will just be providing some ideas of features and changes you can make to the application we created. You can read the final part here.