Question

我正在重新组织我的应用结构，以适应学习Angular和模块化功能。即将每个特征的角度js，html和css保持在一起。到目前为止，我只是有一个充满scss文件的sass文件夹，它被编译成css文件夹中的单个css文件。 gulp文件很简单：

gulp.task('styles', function () {
  gulp.src('_components/sass/*.scss')
      .pipe(compass({
        config_file: 'config.rb',
        css: 'app/css',
        sass: '_components/sass'
      }))
      .on('error', errorLog)
      .pipe(gulp.dest('app/css'))
      .pipe(livereload());
});

我的config.rb文件如下所示：

project_type= :stand_alone
http_path = "/"
css_dir = "app/css"
sass_dir = "_components/sass"
javascripts_dir = "app/js"
images_dir = "img"
line_comments = false
preferred_syntax = :scss
output_style = :expanded
relative_assets = true

现在我正在使用Angular，我想根据它们对应的功能分离scss和css文件。我没有将所有scss文件编译成一个css文件，而是在我的sass文件夹中有一个文件夹结构，在我的应用程序的css文件夹中模仿。

我已尝试将通配符添加到sass目录，如sass: '_/components/sass/**/*'（和我的config.rb文件中相同），但会产生错误：NoMethodError on line ["138"] of C: undefined method 'sub' for nil:NilClass

基本上，我无法弄清楚如何让gulp / compass识别我的sass文件夹中的文件夹结构并模仿css文件夹中的文件夹结构。

任何帮助表示赞赏！谢谢！马特

Answer 1

尝试使用**中的gulp.src()代替sass_dir和sass选项：

gulp.task('styles', function () {
  gulp.src('_components/sass/**/*.scss')
    .pipe(compass({
      config_file: 'config.rb',
      css: 'app/css',
      sass: '_components/sass'
    }))
    .on('error', errorLog)
    .pipe(gulp.dest('app/css'))
    .pipe(livereload());
});

使用Gulp / Compass保持Sass文件夹结构

1 个答案: