Question

我有几个应单独编译的SASS文件。我想皮棉他们的，还有他们的“进口”

我有一些sass文件：

// style.scss

@import "./styles/a.scss";

body {
  background-color: #FFF;
}


// styles/a.scss
h1 {
  font-size: 28px;
  color: #GGG; // invalid hex to test stylelint
}

我通过gulp编译sass样式：

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');

function compileStyles(src, dest) {
  gulp.src(src)
    .pipe(plumber({
      errorHandler: console.error
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(dest));
}

compileStyles('src/style.scss', 'dest');

我想在这里添加stylelint。我尝试通过添加stylelint

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const gulpStylelint = require('gulp-stylelint');

function compileStyles(src, dest) {
  gulp.src(src)
    .pipe(plumber({
      errorHandler: console.error
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulpStylelint({
      failAfterError: true,
      reporters: [
        {formatter: 'string', console: true}
      ]
    }))
    .pipe(gulp.dest(dest));
}

compileStyles('src/style.scss', 'dest');

这是可行的，但是stylelint会处理已编译的样式。编译前如何应用stylelint，但要包含import语句。

Answer 1

创建一个单独的任务以插入Scss文件。您应该有一个用于编译样式的任务，另一个是用于整理样式的任务。试图将这些单独的任务组合成一个单一的问题的原因。

gulp.task('lint-styles', function lintStyles() {
  const gulpStylelint = require('gulp-stylelint');    
  return gulp
    .src('src/**/*.scss')
    .pipe(gulpStylelint({
      reporters: [
        {formatter: 'string', console: true}
      ]
    }));
});

gulp.task('compile-styles', function compileStyles() {
  const gulpSass = require('gulp-sass');    
  return gulp
    .src('src/style.scss')
    .pipe(gulpSass())
    .pipe(gulp.dest('dest'));
});

我如何通过使用gulp-sass和gulp-stylelint来填充样式

1 个答案: