Question

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

如果我的

，下面的代码就可以了

config.paths.src.styles设置为

/styles/app.scss

但是当我将其更改为

时

/风格/ *。SCSS

我喜欢

错误：_theme.scss：13：20：遗失物业价值

问题出来的时候我用@extend .container; 不正常的CSS。

Gulp任务 style.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的导入应该是好的。

Gulp sass watch使用* .scss缺少属性值

1 个答案: