Модификация переменных 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;

0 ответов

Другие вопросы по тегам