How to use with gulp? about postcss-import HOT 10 CLOSED

var gulp    = require('gulp');
var gutil   = require('gulp-util');

// Load plugins:
var plugins = require('gulp-load-plugins')({
  pattern: [
    'gulp-*',
    'gulp.*',
    'browserify',
    'babelify',
    'vinyl-source-stream',
    'vinyl-buffer',
    'browser-sync',
    'autoprefixer',
  ]
});

// Source and destination paths for tasks:
var path = {
  src:   'app/src',
  dest:  'app/public',
  npm:   'node_modules',
};

var atImport = require("postcss-import")

gulp.task('styles', function () {
  var postcssplugins = [
    atImport(),
    // Autoprefix:
    plugins.autoprefixer({
      browsers: [
        'last 3 versions',
        'ie 8',
        'ie 9'
      ]
    })
  ];
  return gulp.src(path.src + '/styles/main.css')
    .pipe(plugins.postcss(postcssplugins))
    // Write main.css
    .pipe(gulp.dest(path.dest + '/styles'))
    .pipe(plugins.browserSync.stream())
    // Report file size:
    .pipe(plugins.size({ showFiles: true }))
    // Minify main.css and rename it to 'main.min.css':
    .pipe(plugins.cssnano())
    .pipe(plugins.rename({suffix: '.min'}))
    .pipe(plugins.size({ showFiles: true }))
    .pipe(gulp.dest(path.dest + '/styles'))
    .pipe(plugins.gzip())
    .pipe(plugins.rename('main.min.gz.css'))
    .pipe(plugins.size({ showFiles: true }))
    .pipe(gulp.dest(path.dest + '/styles'))
    .pipe(plugins.browserSync.stream())
    .on('error', gutil.log);
});

'use strict';

var browserSync = require("browser-sync").create(),
    concat      = require('gulp-concat'),
    del         = require('del'),
    fs          = require('fs'),
    gulp        = require('gulp'),
    intercept   = require('gulp-intercept'), 
    path        = require("path"),
    plumber     = require('gulp-plumber'),
    rename      = require("gulp-rename"),
    runSequence = require('run-sequence'), 
    postcss     = require('gulp-postcss'),
    sass        = require('gulp-sass'),



gulp.task('sass-app', function() {
//   I will import other css files using @import in app.css
    gulp.src('./source/assets/scss/app.css')
        .pipe(plumber())
        .pipe(
          postcss([
            require('autoprefixer')({ browsers: ['last 2 versions'] }),
            require('postcss-simple-vars')({ silent: true })

            ]))
        .pipe(gulp.dest('./css/'))
        .on('end', function(){
            if(isWatching){
                // Only concat if we are watching
                runSequence('css-concat');
            }
        });
});


gulp.task('default', function(callback){
    runSequence(
            'sass-app'

        callback
    );
});