Question

我试图查看我的@imported scss文件，但由于某种原因它停止了工作。无法记住改变任何事情：

    var gulp = require('gulp');
var sass = require('gulp-sass');

//style paths
var sassFiles = 'assets/css/scss/styles.scss',
    cssDest = 'assets/css/';

gulp.task('styles', function(){
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch',function() {
    gulp.watch(sassFiles,['styles']);
});

我的styles.scss：

@import
"fonts.scss",
"basics.scss",
"home.scss";

每当我在home.scss中更改某些内容时，我希望它能够观看，但它只能观看styles.scss。对我来说很有意义，但它过去常常起作用..

Answer 1

来自documentation

gulp.watch（glob [，opts]，tasks）

单个glob或glob数组，指示要观看的文件   为了改变。

您只能查看 sassFiles 中的文件。你可以这样改变这一行

var sassFiles = 'assets/css/scss/**.scss',

或

var sassFiles = ['assets/css/scss/styles.scss',
'assets/css/scss/fonts.scss','assets/css/scss/basics.scss',
'assets/css/scss/home.scss'],

将会监视 assets / css / scss / 文件夹中的所有scss文件。

如果您想按依赖项（ @import ）观看文件，最好使用webpack

Gulp手表进口

1 个答案: