0

Using this tutorial (on How to use Elixir and Laravel 5.* with Bootswatch) , I setup a Bootswatch stylesheet in my Laravel project with Elixir.

Everything works fine, the stylesheets are loaded and I have the Lumen style as wanted. But I don't get how to modify the Bootswatch variables ?

Here is my app.scss. Bootswatch files are loaded before I modify the variable :

@import "bootstrap/stylesheets/bootstrap/variables";
@import "bootswatch/lumen/variables";
@import "bootstrap/stylesheets/bootstrap";
@import "bootswatch/lumen/bootswatch";
@import url('https://fonts.googleapis.com/css?family=Lato:100');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

$brand-danger: purple;

But it doesn't works here.

When modifying this variable into vendor/bower_components/bootswatch-sass/lumen/_variables.scss, it works.

And here is the gulpfile.js :

var elixir = require('laravel-elixir');
var bowerDirBootstrap = "vendor/bower_components/bootstrap-sass-official/assets/";
var bowerDirBootswatch = "vendor/bower_components/bootswatch-sass";
var bowerDirJquery = "vendor/bower_components/jquery/dist/";

elixir(function(mix) {
     mix.sass('app.scss')
         // copy relevant files to the resources folder.  This is the css
         .copy(bowerDirBootstrap, 'resources/assets/sass/bootstrap')
         .copy(bowerDirBootswatch, 'resources/assets/sass/bootswatch')
         // this is the javascript
         .copy(bowerDirJquery + 'jquery.js', 'resources/assets/js/jquery.js')
         .copy(bowerDirBootstrap + 'javascripts/bootstrap.js',
         'resources/assets/js/bootstrap.js')
         .version('css/app.css')

     mix.scripts([
             'js/jquery.js',
             'js/bootstrap.js'
         ],
         'public/js/app.js',
         'resources/assets'
     );
 });

To be honest I don't exactly understand the "copy" parts : when I delete them, everything still works as said before : modifying the variable in _variable.scss works, updating the variable in app.scss doesn't.

Edit

I've tried to put the variable everywhere and with / without the !default flag, nothing works.

$brand-danger: white !default;
@import "bootstrap/stylesheets/bootstrap/variables";
$brand-danger: white !default;
@import "bootswatch/lumen/variables";
$brand-danger: white !default;
@import "bootstrap/stylesheets/bootstrap";
$brand-danger: white !default;
@import "bootswatch/lumen/bootswatch";
$brand-danger: white !default;
@import url('https://fonts.googleapis.com/css?family=Lato:100');
$brand-danger: white !default;
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
$brand-danger: white !default;
tomsihap
  • 1,712
  • 18
  • 29

0 Answers0