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

【问题标题】：Yeoman / Bower / Gulp Auto Compiling SASS and Refreshing on File ChangeYeoman / Bower / Gulp 自动编译 SASS 并刷新文件更改
【发布时间】：2015-03-31 21:51:19
【问题描述】：

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

基本上对该路径中的文件所做的更改： /bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/

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

几个小时后我被难住了，有人可以帮忙解释一下吗？

【问题讨论】：

标签： gulp gulp-watch gulp-sass

【解决方案1】：

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

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

相反，您可以使用 sass 将 @import 引导程序 .scss 文件从 /bower_components 导入到您的 main.scss 文件中。然后你可以使用这些sass variables重新定义你想要的所有样式

【讨论】：

这对于不好的做法是有道理的，但我需要做的就是将 _custom.scss 文件重新添加到 _bootstrap.scss 中。只要“凉亭更新”不删除文件，它就可以工作。我在使用我的方法导入时遇到问题，所以巧合的是，我目前正在按照您的建议进行操作。我可以将 _variables.scss 文件导入我的 main.scss；但是，我无法将引导变量“$brand-success:”覆盖为黄色。您能否顺利上班？
哦，我刚刚意识到你不能用 @import 行之后的值覆盖导入的变量 - 它必须在之前。如果是在它必须是另一个 $variable: $variable 或 .class { color: $variable; } 但不是 $variable: color;。 stackoverflow.com/questions/11773583/…
"将 _variables.scss 文件从 bower_components 文件夹复制到例如 app/styles，然后将其导入到 main.scss 或其他任何名称中，在引导程序的导入语句上方。这将导致您的自定义文件覆盖默认变量。” 根据此线程Custom Bootstrap with Bower

【解决方案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 列表中，它将包含在分布式版本中。

【讨论】：