保持 Sass 文件夹结构 Gulp/Compass

Question

我正在重组我的应用程序结构以适应学习 Angular 和模块化功能。即，将每个功能的 angular js、html 和 css 保持在一起。到目前为止，我只有一个 sass 文件夹，里面装满了 scss 文件，这些文件被编译成 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());
});

保持 Sass 文件夹结构 Gulp/Compass

Keeping Sass Folder Structure with Gulp/Compass

sass

gulp

compass-sass