title: Gulp sass different folders into one CSS file
body: <p>I know that GULP-SASS should be trivial and easy, but if we can complicate the things why no to right ? </p>
  
  <p>Well it seems that the project I work has a "particular" structure and I must get used with it. It is like this :</p>
  
  <pre><code>-static
    -app
      -components
        -component1
          -styles
            -component1.scss
        -component2
          -styles
            -component2.scss
      ...
  </code></pre>
  
  <p>On the same level with app I wave a subproject ... lets call it web :</p>
  
  <pre><code>-static
    -web
      -res
        -static
          -app
             -components
                -component3
                  -style
                     -component3.scss   
  </code></pre>
  
  <p>Now comes the fun part : how the hack can I create one single CSS file from this mess ? I tried this without any luck :</p>
  
  <pre><code>// Setting up the sass task
  gulp.task('sass',  function (){
  // Taking the path from the above object
      var sassApp = gulp.src(paths.styles.filesApp)
      // Sass options - make the output compressed and add the source map
      // Also pull the include path from the paths object
      .pipe(sass({
          outputStyle: 'compact', //compressed
          //sourceComments: 'map',
          includePaths : [paths.styles.srcApp]
      }))
      // If there is an error, don't stop compiling but use the custom displayError function
      .on('error', function(err){
          displayError(err);
      })
      // Pass the compiled sass through the prefixer with defined 
      .pipe(prefix(
          'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ))
      // Funally put the compiled sass into a css file
      .pipe(gulp.dest(paths.styles.dest));
  
      var sassWeb = gulp.src(paths.styles.filesWeb)
      // Sass options - make the output compressed and add the source map
      // Also pull the include path from the paths object
      .pipe(sass({
          outputStyle: 'compact',
          //sourceComments: 'map',
          includePaths : [paths.styles.srcWeb]
      }))
      // If there is an error, don't stop compiling but use the custom displayError function
      .on('error', function(err){
          displayError(err);
      })
      // Pass the compiled sass through the prefixer with defined
      .pipe(prefix(
          'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ))
      // Funally put the compiled sass into a css file
      .pipe(gulp.dest(paths.styles.dest));
  
      return
          gulpMerge(sassApp, sassWeb)
          .pipe(concat('all-css.css'))
          .pipe(gulp.dest(paths.styles.dest));
  });
  </code></pre>