Gulp sass watch 缺少 *.scss 的属性值

Question

我的目标是查看我所有的 scss 文件

如果我的代码在下面就可以了

config.paths.src.styles 设置为

/styles/app.scss

但是当我把它改成

/styles/*.scss

我喜欢

错误：_theme.scss:13:20：缺少属性值

问题出来的时候 我使用@extend .container； 不正常的css。

Gulp 任务 样式.js

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var gulpif = require('gulp-if');
var rename = require('gulp-rename');
var csso = require('gulp-csso');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');

function handleError(err) {
  console.log(err.toString());
  this.emit('end');
}

var sassOptions = { // The options to be passed to sass()
    style: 'expanded', 
    'sourcemap=none': true 
};

//https://github.com/jgoux/generator-angulpify/issues/19
module.exports = gulp.task('styles', function () {
  return gulp.src(config.paths.src.styles)
    .pipe(autoprefixer('last 1 version'))
    .pipe(gulpif(release, csso()))
    .pipe(gulpif(release, sass(sassOptions).on('error', handleError), sass(sassOptions).on('error', handleError)))
    .pipe(rename(config.filenames.styles))
    .pipe(gulpif(release, gulp.dest(config.paths.dest.phonegap.styles), gulp.dest(config.paths.dest.build.styles) ))
    .pipe(gulpif(!release,reload({stream:true})));
});

watch.js

'use strict';

var gulp = require('gulp');


module.exports = gulp.task('watch', function() {
    var stylesWatcher = gulp.watch(config.paths.src.styles, ['styles']);
    stylesWatcher.on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks styles');
    });
});

app.scss

@import "variables";
@import "imports";
@import "theme";

_theme.js

.morra-sub-header{
  @include clearfix;
  @extend .container;
}

你可以看看整个 gulp 设置

https://github.com/whisher/angular-bootstrap-cordova-seed/tree/master/gulp

结束

你应该在样式任务中使用 app.scss

和 *.scss 在监视任务中（傻我:)）

mainStyles: SRC_FOLDER + '/styles/app.scss',
styles: SRC_FOLDER + '/styles/*.scss',
module.exports = gulp.task('styles', function () {
  return gulp.src(config.paths.src.mainStyles)
    .pipe(autoprefixer('last 1 version'))
    .pipe(gulpif(release, csso()))
    .pipe(gulpif(release, sass(sassOptions).on('error', handleError), sass(sassOptions).on('error', handleError)))
    .pipe(rename(config.filenames.styles))
    .pipe(gulpif(release, gulp.dest(config.paths.dest.phonegap.styles), gulp.dest(config.paths.dest.build.styles) ))
    .pipe(gulpif(!release,reload({stream:true})));
});
module.exports = gulp.task('watch', function() {
    var stylesWatcher = gulp.watch(config.paths.src.styles, ['styles']);
    stylesWatcher.on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks styles');
    });
});

Answer 1

这里的问题是您的*.scss glob 无需特殊顺序即可获取所有内容。所以可以先选择_theme.scss 文件，因为它使用了_imports.scss 中尚未处理的变量，所以您遇到了错误。

为防止这种情况，您可以使用特定于数组的模式首先专门加载_imports.scss。

config.paths.src.styles = [
  '_imports.scss',
  '*.scss'
];

尽管我不知道您为什么还要管道化您的部分，但从 app.scss 导入应该很好。