如果sass文件中的导入路径错误,为什么gulp不会抛出错误?

时间:2018-11-10 20:01:28

标签: gulp-sass node-sass

我的问题是,当我在scss文件中使用错误的导入路径时,为什么从gulp任务中没有收到任何错误消息?

我使用这个gulp任务将sass文件编译并缩小到其目标目录

// gulpfile.js
var gulp   = require('gulp');
var sass   = require('gulp-sass');

var frontendSassSrcDir = 'build/frontend/sass/**';
var frontendCssDestDir = 'public/css/';
var backendSassSrcDir  = 'build/backend/sass/**';
var backendCssDestDir  = 'public/css/';


gulp.task('frontend-style', function() {
  return gulp
      .src(frontendSassSrcDir + '/*.scss')
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(gulp.dest(frontendCssDestDir))
});

gulp.task('backend-style', function() {
  return gulp.src(backendSassSrcDir + '/*.scss')
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(gulp.dest(backendCssDestDir));
});


gulp.task('default-watch', function() {
  gulp.watch('build/frontend/sass/**/*.scss', ['frontend-style']);
  gulp.watch('build/backend/sass/**/*.scss', ['backend-style']);
});

这是文件夹结构

- project-folder
  - build
    - backend
      - sass
        - backend.scss
    - frontend
      - sass
        - frontend.scss
  - node_modules
  - public
    - css
      - backend.css
      - frontend.css
  gulpfile.js

这是我的scss文件的错误内容

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

如果我在命令行中运行此命令,则它看起来像是可行的,因为我得到了此输出,但是它会生成一个空的CSS文件

$ node_modules/gulp/bin/gulp.js frontend-style

[20:50:40] Using gulpfile /opt/workspace/www/bhajanBook/gulpfile.js
[20:50:40] Starting 'frontend-style'...
[20:50:40] Finished 'frontend-style' after 73 ms

为什么没有像该命令一样给我同样的错误消息?

$ node_modules/sass/sass.js ./build/frontend/sass/frontend.scss ./public/css/frontend.css

Error: Can't find stylesheet to import.
@import "node_modules/bootstrap/scss/functions";
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
build/frontend/sass/frontend.scss 1:9  root stylesheet

在命令行中运行它可以帮助我对其进行修复

@import "./../../../node_modules/bootstrap/scss/functions";
@import "./../../../node_modules/bootstrap/scss/variables";
@import "./../../../node_modules/bootstrap/scss/mixins";

我了解到on('error', sass.logError)如果在gulpfile.js中犯了一个错误,就会抛出一个错误,但是它也不应该负责捕获此错误吗?

如果我在scss文件中输入错误,是否还有更具体的解决方案来显示错误消息?

0 个答案:

没有答案