install Bootswatch 4 theme in Laravel 5.5

In Laravel 5.5 and bootstrat/bootswatch 4:

first install Laravel 5.5 Frontend Preset for Boostrap 4

composer require laravelnews/laravel-twbs4

next, switch to bs4:

php artisan preset bootstrap4-auth

edit resources/assets/js/boostrap.js:

// window.$ = window.jQuery = require('jquery/dist/jquery.slim');
// Full jQuery
window.$ = window.jQuery = require('jquery');

edit resources/assets/sass/app.scss (for theme litera) :

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
//@import "variables";
// Bootswatch Variables for your chosen theme
@import "node_modules/bootswatch/dist/litera/variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

// Bootswatch theme main CSS files
@import "node_modules/bootswatch/dist/litera/bootswatch";

next install

npm install bootswatch
npm run dev

dan3460

8 years ago

Level 8

Nice just in time for my project. Thanks. One question how do you use the theme you selected? lets say Yeti?

Maso

8 years ago

Level 13

Just replace litera with yeti in resources/assets/sass/app.scss and run npm run dev again.

Maso

7 years ago

Level 13

on Laravel 5.8:

npm install
npm i bootswatch

next - edit /resources/sass/app.scss:

// Variables
@import '~bootswatch/dist/materia/variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

@import "~bootswatch/dist/materia/bootswatch";

and you have https://bootswatch.com/materia/ theme :)

2 likes

Please or to participate in this conversation.