首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Gulp不编译@import sass文件

问Gulp不编译@import sass文件
EN

Stack Overflow用户
提问于 2016-04-01 16:00:07
回答 1查看 488关注 0票数 0

我在试着让Gulp编译我的sass文件。它会看到main.sass文件中的变化,但是如果我@导入文件,它不会看到它们中的变化,除非我重新启动gulp。

这是我的卷宗

代码语言:javascript
复制
var gulp = require('gulp'),
      sass = require('gulp-ruby-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      browserSync = require('browser-sync').create(),
      jade = require('gulp-jade');

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir:'./'
        }
    });
});

// Compiling SASS to CSS 
gulp.task('styles', function () {
  return sass('assets/sass/main.sass')
    .on('error', sass.logError)
  .pipe(autoprefixer({
    browsers: ['last 3 versions','> 5%'],
    cascade: false
  }))
    .pipe(gulp.dest('assets/css/'))
    .pipe(browserSync.stream());

});
//HTML 
gulp.task('templates', function() {
  var YOUR_LOCALS = {};

  gulp.src('./*.jade')
    .pipe(jade({
      locals: YOUR_LOCALS,
      pretty: true
    }))
    .pipe(gulp.dest('./'))
});

//Default task
gulp.task('default', ['styles', 'watch', 'browser-sync', 'templates']);

gulp.task('watch', function(){
    gulp.watch('*.html').on('change', browserSync.reload);
    gulp.watch('*.jade').on('change', browserSync.reload);
    gulp.watch('*.css').on('change', browserSync.reload);
    gulp.watch('assets/sass/main.sass', ['styles']);
    gulp.watch('*.jade', ['templates']);
}) 

这就是我项目的结构

​

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-04-01 16:25:42

您只关注对assets/sass/main.sass的更改。您需要监视.sass文件在assets/sass下面的任何更改。

代码语言:javascript
复制
gulp.watch('assets/sass/**/*.sass', ['styles']);

而不是:

代码语言:javascript
复制
gulp.watch('assets/sass/main.sass', ['styles']);
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/36360798

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档