Vanguard is based on Bootstrap 4 and it uses SASS pre-processor for generating application stylesheets. This means that the recommended way to modify the stylesheets is to modify the sass files located in resources/assets/sass folder and then to compile them down to a single css file.
Of course, if you want, you can always create your own css file and include after the main application css file in resources/assets/layouts/app.blade.php layout file, but it is much easier to use sass for any styling you want to add or update.
Requirements
Laravel Mix, which is the default way to compile assets for Laravel applications, requires Node.js and NPM to be installed on your development machine. More info on how to install it is available in Mix's documentation.
Using Laravel Mix
After you install Node.js and NPM, you need to run the following command from a Vanguard's root directory to install all required packages:
npm installAfter the package installation is finished, you can run the following commands to compile (and minify) Vanguard styles:
// Run all Mix tasks...
npm run dev
// Run all Mix tasks and minify output...
npm run productionBy running the above commands you will automatically compile everything to plain CSS and put it in public/assets/css/app.css file.
More info about other available Laravel Mix commands can be found in Mix's documentation.
Changing Theme Colors
As mentioned above, Vanguard's theme is based on Bootstrap 4, which means that you can easily override any SASS variables available inside the bootstrap itself like it's explained in Bootstrap's documentation.
Vanguard overrides some of Bootstrap's variables in resources/assets/sass/_variables.scss file. So, for example, if you want to change the theme primary color from #179970 to #aa0000 all you need to do is to update the $primary variable in _variables.scss file like follows
$primary: #aa0000;and then to run the following command
npm run dev
// or, if you are building for production version of the site
npm run prod