2015-03-31 2 views
1

Я не могу получить Yeoman/Bower/Gulp и генератор gulp-webapp для автоматической компиляции изменений SASS, внесенных в файл Bootstrap _variables.scss и перезагрузить.Yeoman/Bower/Gulp Автокомпилирование SASS и обновление при изменении файла

В основном изменения делается для файлов на этом пути: /bower_components/самозагрузки-дерзость-официальный/активы/таблицы стилей/начальной загрузки/

Я провел некоторое время, настраивая gulpfile.js и сумел получить автоперезагрузки работать на изменения, внесенные в любые файлы в указанном выше пути; однако он не перекомпилирует файлы sass. Единственный способ перекомпиляции - использовать команду «gulp», но это будет контрпродуктивно.

Я не могу сказать, что после многих часов я мог бы пролить свет на это?

ответ

1

Проект по дизайну настроен только для просмотра изменений в ваших личных файлах стиля в каталоге app/styles/ и его подкаталогах.

Идея изменения файлов в каталоге /bower_components обычно считается плохой практикой. Если вы случайно запустили bower update, он заменит все ваши изменения на ваши измененные файлы bower.

Вместо этого вы можете использовать sass для @import загрузочный файл .scss в файл main.scss от /bower_components. то вы можете переопределить все стили, которые вы хотите использовать. sass variables

+0

Это имеет смысл в отношении плохой практики, но все, что мне нужно сделать, это добавить обратно в _custom.scss-файл обратно в _bootstrap.scss. Пока «bower update» не удаляет файлы, он должен работать. У меня возникли проблемы с импортом с использованием моего метода, так что случайно я делаю то, что вы предложили на данный момент. Я могу импортировать файл _variables.scss в my main.scss; однако я не могу переписать переменную bootstrap «$ brand-success:» на желтый. Можете ли вы работать без проблем? – fseminario

+0

О, я просто понял, что вы не можете переопределить импортированную переменную со значением после строки @import - она ​​должна быть раньше. Если это после того, как она должна быть либо другой переменной $: переменная $ или .class {color: $ variable; }, но не $ variable: color ;. http://stackoverflow.com/questions/11773583/can-i-override-sass-variables-after-they-have-been-imported – fseminario

+0

_ "Скопируйте файл _variables.scss из папки bower_components, например, в приложение/стили, затем импортируйте его в свой main.scss или что-то еще, что указано выше, над инструкцией import для начальной загрузки. Это приведет к тому, что ваш пользовательский файл переопределит переменные по умолчанию. »_ в соответствии с этой нитью [Custom Bootstrap with Bower] (http: //stackoverflow.com/questions/15385705/how-to-keep-twitter-bootstrap-customization-with-bower) –

0

Я нашел решение. Не уверен, что это лучший способ сделать, но он работает.

В разделе gulp.watch коды (строка 98)

gulp.watch('app/styles/**/*.scss', ['styles']); 
gulp.watch('app/fonts/**/*', ['fonts']); 
gulp.watch('bower.json', ['wiredep', 'fonts']); 

Я дублирует первую строку и просто добавил путь к бутстрапу .scss файлов.

gulp.watch('app/styles/**/*.scss', ['styles']); 
gulp.watch('bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/**/*.scss', ['styles']); 
gulp.watch('app/fonts/**/*', ['fonts']); 

Теперь всякий раз, когда я меняю сказать $ БТН-умолчанию-BG в файле _variables.scss автоматически перекомпилировать.

Идея заключается в том, что я могу добавить _ [name] .scss в исходный список Bootstrap SASS и будет включен в распределенную версию.