Yeoman / Bower / Gulp Автоматическая компиляция SASS и обновление при изменении файла

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

В основном изменения вносятся в файлы по этому пути: /bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/

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

Я в тупике после многих часов, может кто-нибудь, пожалуйста, помогите пролить свет на это?


gulp gulp-sass gulp-watch
person fseminario    schedule 31.03.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

person Chris Traveis    schedule 31.03.2015
comment
Это имеет смысл в отношении плохой практики, но все, что мне нужно сделать, это добавить обратно файл _custom.scss обратно в _bootstrap.scss. Пока обновление Bower не удаляет файлы, оно должно работать. У меня были проблемы с импортом с использованием моего метода, поэтому по совпадению я делаю то, что вы предложили в данный момент. Я могу импортировать файл _variables.scss в мой main.scss; однако я не могу перезаписать переменную начальной загрузки $brand-success: на желтый. Умеете ли вы без проблем добираться до работы? - person fseminario; 01.04.2015
comment
О, я только что понял, что вы не можете переопределить импортированную переменную со значением после строки @import - оно должно быть раньше. Если это после этого, это должна быть либо другая $variable: $variable, либо .class { color: $variable; } но не $variable: color;. stackoverflow.com/questions/11773583/ - person fseminario; 01.04.2015
comment
Скопируйте файл _variables.scss из папки bower_components, например, в. app/styles, а затем импортируйте его в файл main.scss или как там он называется, над оператором импорта для начальной загрузки. Это приведет к тому, что ваш пользовательский файл переопределит переменные по умолчанию. согласно этой теме Пользовательский Bootstrap с Bower - person Chris Traveis; 01.04.2015

arrow_upward
0
arrow_downward

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

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

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

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

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

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

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

person fseminario    schedule 31.03.2015