用Gulp / Compass保持Sass文件夹结构 [英] Keeping Sass Folder Structure with Gulp/Compass

问题描述

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

  gulp.task（'styles'，function（）{
 gulp.src（ '_components / sass / *。scss'）
 .pipe（指南针（{
 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文件一样），但是会产生一个错误：在C的line [138]上的NoMethodError：undefined方法'sub'for nil：NilClass

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

任何帮助表示赞赏！
谢谢！
Matt

解决方案

在<$中尝试使用 ** c $ c> gulp.src（）而不是在 sass_dir 和 sass 选项中：

  gulp.task（'styles'，function（）{
 gulp.src（'_ components / sass / ** / *。scss'）
 .pipe（指南针（{
 config_file：'config.rb'，
 css：'app / css'，
 sass：'_components / sass'
）））
 .on（'error'，errorLog）
 .pipe（gulp.dest（'app / css'））
 .pipe（livereload ））; 
}）; 
  

I'm reorganizing my app structuring to accommodate learning Angular and modularizing the features. i.e. keeping the angular js, html, and css for each feature together. Up until now I simply had a sass folder full of scss files that got compiled into a single css file in a css folder. The gulp file was simple:

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());
});

My config.rb file looks like this:

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

Now that I am using Angular, I want to separate the scss and css files based on the feature they correspond with. Instead of having all scss files compile down to one css file, I'd rather have a folder structure within my sass folder that is mimicked in my css folder within the app.

I've tried adding wild cards to the sass directory like sass: '_/components/sass/**/*' (and the same in my config.rb file) but that generates an error: NoMethodError on line ["138"] of C: undefined method 'sub' for nil:NilClass

Basically, I can't figure out how to have gulp/compass recognize a folder structure within my sass folder and mimic that in the css folder.

Any help is appreciated! Thanks! Matt

解决方案

Try using ** in gulp.src() instead of in the sass_dir and sass options:

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文件夹结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！