Модификация переменных Bootswatch с помощью Elixir
Используя это руководство (о том, как использовать Elixir и Laravel 5.* с Bootswatch), я установил таблицу стилей Bootswatch в своем проекте Laravel с помощью Elixir.
Все работает нормально, таблицы стилей загружены, и у меня есть стиль Lumen, как я хотел. Но я не понимаю, как изменить переменные Bootswatch?
Вот мой app.scss
, Файлы начальной загрузки загружаются до того, как я изменю переменную:
@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;
Но это не работает здесь.
При изменении этой переменной в vendor/bower_components/bootswatch-sass/lumen/_variables.scss
, оно работает.
А вот и 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'
);
});
Честно говоря, я не совсем понимаю части "копирования": когда я их удаляю, все по-прежнему работает, как сказано выше: изменение переменной в _variable.scss
работает, обновляя переменную в app.scss
не делает.
редактировать
Я пытался поместить переменную везде и с / без флага! Default, ничего не работает.
$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;