2

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

使用下面的代码就可以了，如果我的

config.paths.src.styles 设置为

/styles/app.scss

但是当我把它改成

/styles/*.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');
    });
});

应用程序.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');
    });
});
4

1 回答 1

1

这里的问题是您的*.scssglob 没有特殊顺序就可以获取所有内容。因此_theme.scss可以首先选择文件，并且因为它使用的变量来自_imports.scss尚未处理的变量，所以您遇到了错误。

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

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

即使我不知道你为什么还要管道化你的部分，从 的导入app.scss应该是好的。

于 2014-12-08T21:55:15.137 回答