Question

我无法让Yeoman / Bower / Gulp和gulp-webapp生成器自动编译对Bootstrap _variables.scss文件进行的SASS更改并重新加载。

对此路径中的文件进行的基本更改： / bower_components /自举-SASS官方/资产/样式表/引导/

我花了一些时间调整gulpfile.js并设法让autoreload处理对上面路径中的任何文件所做的更改;但是，它不会重新编译sass文件。重新编译的唯一方法是使用“gulp”命令，但这会产生反效果。

经过好几个小时后我很难过，有人可以帮忙解释一下吗？

Answer 1

设计项目设置为仅监视app/styles/目录及其子目录中个人样式文件的更改。

修改/bower_components目录中的文件的想法通常被认为是一种不好的做法。如果您不小心运行了bower update，它会覆盖您修改的凉亭文件的所有更改。

相反，您可以使用sass将@import引导.scss文件放入main.scss的{{1}}文件中。然后，您可以使用这些sass variables

重新定义所需的所有样式

Answer 2

我找到了解决方案。不确定这是否是最佳方式，但它有效。

在代码的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']);

现在每当我更改_variables.scss文件中的$ btn-default-bg时，它会自动重新编译。

我的想法是我可以将_ [name] .scss添加到原始的Bootstrap SASS列表中，它将包含在分布式版本中。

Yeoman / Bower / Gulp自动编译SASS并刷新文件更改

2 个答案: