Javascript 吞咽sass和吞咽watch,保存SCS时找不到文件
我目前正在设置gulpfile,当watch任务运行scss任务时,我的gulp sass出现问题 这就是我的gulpfile.js的外观:Javascript 吞咽sass和吞咽watch,保存SCS时找不到文件,javascript,node.js,gulp,gulp-watch,gulp-sass,Javascript,Node.js,Gulp,Gulp Watch,Gulp Sass,我目前正在设置gulpfile,当watch任务运行scss任务时,我的gulp sass出现问题 这就是我的gulpfile.js的外观: var gulp = require('gulp'), plumber = require('gulp-plumber'), sass = require('gulp-sass'), sourcemaps = require('gulp-sourcemaps'); var onError = function(err) {
var gulp = require('gulp'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps');
var onError = function(err) {
console.log(err);
};
var bases = {
dist: './dist/',
src: './src/'
};
var paths = {
sass: [bases.src + 'scss/base.scss'],
sourcemaps: '/'
};
gulp.task('scss', function(){
return gulp.src(paths.sass)
.pipe(plumber({
errorHandler: onError
}))
.pipe(sourcemaps.init())
.pipe(sass({
sourcemap: true,
style: 'expanded',
sourceComments: 'normal',
onError: onError
}))
.pipe(sourcemaps.write(paths.sourcemaps))
.pipe(gulp.dest(bases.dist + 'css/'))
});
gulp.task('watch', function(){
gulp.watch(bases.src + 'scss/**/*.scss', ['scss'])
});
gulp.task('default', ['scss','watch']);
base.scss仅包含以下内容:
还尝试了完整路径,但没有fileext。同样的结果
@import 'modules/modules_base.scss';
我在控制台中遇到的错误:
[18:54:13] Finished 'scss' after 12 ms
[18:54:15] Starting 'scss'...
{ [Error: src\scss\base.scss
1:9 file to import not found or unreadable: ./src/scss/modules/modules_base.scss
Current dir: ]
message: 'src\\scss\\base.scss\n 1:9 file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: ',
column: 9,
line: 1,
file: 'stdin',
status: 1,
messageFormatted: '\u001b[4msrc\\scss\\base.scss\u001b[24m\n\u001b[90m 1:9\u001b[39m file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: ',
name: 'Error',
stack: 'Error: src\\scss\\base.scss\n 1:9 file to import not found or unreadable: ./src/scss/modules/modules_base.scss\nCurrent dir: \n at options.error (c:\\Code\\colorpicker\\node_modules\\gu
lp-sass\\node_modules\\node-sass\\lib\\index.js:276:32)',
showStack: false,
showProperties: true,
plugin: 'gulp-sass' }
基本错误是:要导入的1:9文件找不到或不可读:./src/scss/modules/modules\u base.scss
应用程序的结构:
-component
gulpfile.js
-dist
-css
base.css
base.css.map
-src
-scss
base.scss
-modules
-modules_base.scss
该错误仅在我保存modules_base.scs并启动监视任务时发生,在我运行默认任务时从不发生
感谢您的建议
注:
节点-v:0.12.0
吞咽:3.8.11
吞咽sass:2.0.1您使用的是vscode吗?我在github上找到了这个
gulp.task('sass', function () {
return gulp.src(SCSS_SRC)
.pipe(wait(500))
.pipe(sass({
outputStyle: 'compressed',
includePaths: ['./bower_components/susy/sass', './bower_components/breakpoint-sass/stylesheets']
}).on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(autoprefixer({
browsers: ['>1%', 'last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('./dist/css'));
});
基本上
我在保存sublime时遇到了这个问题。第一次
文件更改后,gulp watch将在文件完成之前启动
正在保存,或在lib sass启动时无法读取。我增加了50毫秒的延迟
到似乎管用的管道
你试过这个吗
编辑-我使用运行序列来确保流程在运行需要它们的东西之前完成。看看
gulp.task('default',function(callback){
runSequence('clean-folder','css','js'['responsive-jpg','responsive-webp','copy-data']),callback
});
基本上,clean文件夹运行并删除我想要重做的内容,然后css编译。在运行序列收到所有SCS已传输的回调之前,不会运行任何后续操作。发现如果我从SCS任务中删除了返回,任务不会停止,因此我只需按ctrl+s几次就可以使用。不是一个解决方案,但现在它至少起作用了