【发布时间】：2016-12-24 08:20:06
【问题描述】：
我正在使用 gulp-inject 自动添加 SASS 导入，因为它们是在我的项目中新创建的。这工作正常，新的 SASS 文件已正确导入，但是当 gulp-watch 运行时删除已导入的文件时，它会崩溃并出现以下错误：
Error: _dev\style\style.scss
Error: File to import not found or unreadable: components/_test - Copy.scss
Parent style sheet: stdin
on line 2 of stdin
>> @import "components/_test - Copy.scss";
我花了好几个小时试图弄清楚为什么它会尝试编译带有过期导入的旧版本的样式表。我在 SASS 任务上设置了延迟，并且当 gulp-sass 运行时，实际文件中的导入是正确的。我读过 gulp-watch 可能正在缓存 stylehseet，但真的不确定。
下面是我的 Gulp 文件的相关部分，底部是我完整的 gulp 文件的链接。
这是我的观看任务： （组件任务触发SASS任务）
// SASS
plugins.watch([paths.dev+'/**/*.scss',!paths.dev+'/style/components/**/*.scss'], function () {gulp.start(gulpsync.sync([
'build-sass'
]));});
// COMPONENTS
plugins.watch(paths.dev+'/style/components/**/*.scss', function () {gulp.start(gulpsync.sync([
'inject-deps'
]));});
SASS 任务
gulp.task('build-sass', function() {
// SASS
return gulp.src(paths.dev+'/style/style.scss')
.pipe(plugins.wait(1500))
.pipe(plugins.sass({ noCache: true }))
.pipe(gulp.dest(paths.tmp+'/style/'));
});
注入任务
gulp.task('inject-deps', function() {
// Auto inject SASS
gulp.src(paths.dev+'/style/style.scss')
.pipe(plugins.inject(gulp.src('components/**/*.scss', {read: false, cwd:paths.dev+'/style/'}), {
relative: true,
starttag: '/* inject:imports */',
endtag: '/* endinject */',
transform: function (filepath) {
return '@import "' + filepath + '";';
}
}))
完整的 GULP 文件： https://jsfiddle.net/cwu0m1cp/
这里要求的是带有导入的 SASS 文件，只要 watch 任务没有运行，它就可以正常工作，导入的文件不包含 CSS：
删除前的 SASS 文件：
/* inject:imports */
@import "components/_test.scss";
@import "components/_test-copy.scss";
/* endinject */
删除后的 SASS 文件：
/* inject:imports */
@import "components/_test.scss";
/* endinject */
【问题讨论】：
-
inject-deps和build-sass都来自同一个文件。为什么这不仅仅是一个流/任务？为什么inject-deps没有gulp.dest()？ -
所有这些任务是怎么回事：
watch:message、watch:reload、clean:pub、build:pub。它们与您的问题相关，然后您需要将它们包括在内。或者它们不相关，然后不要费心提及它们。阅读this -
当 sass 和 inject 在同一个任务中时，我得到了一个监视循环，因此我不得不将它们分开。我复制了我的整个任务，你提到的那些不相关的部分，如果它更清楚，我可以将它们删除。
-
如果您对此问题有任何建议，我已经清理了问题并包含了整个 gulp 文件？
-
@Alex，你能显示 scss 文件吗，因为我认为这是 sass 错误
标签： javascript node.js npm gulp gulp-watch