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

Question

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

基本上对此路径中的文件进行了更改： /bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/

我花了一些时间调整 gulpfile.js 并设法让 autoreload 处理对上述路径中的任何文件所做的更改；但是，它不会重新编译 sass 文件。重新编译的唯一方法是使用 "gulp" 命令，但这会适得其反。

几个小时后我感到很困惑，有人可以帮我解释一下吗？

Answer 1

我找到了解决办法。不确定这是否是最好的方法，但它确实有效。

在代码的 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 列表中，它将包含在分发版本中。

Answer 2

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

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

相反，您可以使用 sass 将 @import bootstrap .scss 文件转换为来自 /bower_components 的 main.scss 文件。然后你可以使用这些 sass variables

重新定义你想要的所有样式

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

Yeoman / Bower / Gulp Auto Compiling SASS and Refreshing on File Change

gulp

gulp-sass

gulp-watch