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;