Link:  https://asked.io/using-bootstrap-3-less-or-scss-with-elixir

I recently wrote an article about How-to setup Laravel 5, VueJs, and Bootstrap 3 and was asked how-to make modifications to things like the navbar.

My how-to didn't cover anything about that so here I will discuss how-to enable and modify Bootstrap 3 variables with Laravel 5 and Elixir.

Step 1: Create a project

In your terminal:

composer create-project --prefer-dist laravel/laravel .

Step 2: Install Gulp

Don't have npm? Install node.

In your terminal:

npm install --global gulp
npm install

Step 3: Less or SCSS?

The choice is yours. Bootstrap 3 is compiled with Less, not SCSS, but SCSS is included by default in Laravel 5s gulpfile.js - I prefer Less over SCSS.

Bootstrap 3 SCSS

Edit: resources/assets/sass/app.scss

Make it read:

@import "_variables.scss"
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap

Create: resources/assets/sass/_variables.scss

Define what variables you would like to adjust, ie:

$brand-primary: #000;

Bootstrap 3 Less

Install bootstrap:

npm install bootstrap

Create: resources/assets/less/app.less

Make it read:

@import "node_modules/bootstrap/less/bootstrap.less";
@import "variables.less";

Create: resources/assets/less/variables.less

Define what variables you would like to adjust, ie:

@brand-primary: #000;

Edit: gulpfile.js Change:

elixir(function(mix) {
    mix.sass('app.scss');
});

To:

elixir(function(mix) {
    mix.less('app.less');
});

Step 4: Compile

Now that you've enabled the less or scss versions you need to compile everything into app.css.

In your terminal:

gulp

Step 5: Link to your stylesheet

Edit your template and in the head tag add:

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Make some changes to chec