title: Gulp compiling multiple css files into one
body: <p>I have two files, <code>main.css</code> and <code>_vars.css</code> and i'm using PostCSS. I'm still learning the different plugins and setup with PostCSS however, i'm also fairly new to Gulp so i'm having an issue with compiling my css files.</p>
  
  <p>I want to read, both <code>main.css</code> and <code>_vars.css</code> then compile them into </p>
  
  <p><code>./bundle/stylecss/</code> into a file called <code>main.css</code>.</p>
  
  <pre><code>  gulp.task('css', function () {
       return gulp.src('./postcss/**/*.css')
          // .pipe(postcss([ vars({ variables: colors }) ]))
          .pipe(postcss([ require('postcss-simple-vars')({ silent: true }) ]))
          .pipe(gulp.dest('./bundle/stylescss/main.css'));
  });
  </code></pre>
  
  <p>My gulp file is above, but when I run my gulpfile it I get <a href="https://i.stack.imgur.com/kHirO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kHirO.png" alt="enter image description here"></a></p>
  
  <p>Any ideas what i'm doing wrong? Thanks!</p>