@import sass in Gulp.js

I am trying to compile the sass files in a main file that contains all the @import but I can not make it work. My code is:

gulpfile.js:

//Cargar módulos
var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    notify = require("gulp-notify"),
    browserSync = require('browser-sync').create(),
    browserSync = require('browser-sync'),
    sass = require('gulp-sass'),
    //sassImport    = require('gulp-sass-import'),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    imagemin = require('gulp-imagemin'),
    connect = require('gulp-connect-php');

//browsersync sass
gulp.task('serve', ['sass'], function() {
    browserSync.init({
        proxy: "localhost"
    });
});

//browsersync php
gulp.task('connect', function() {
    connect.server({}, function() {
        browserSync({
            proxy: 'localhost'
        });
    });
});

//estilos css
gulp.task('sass', function(done) {
    return gulp.src('./src/scss/*.scss')
        .pipe(sourcemaps.init())
        /*.pipe(sassImport({
            filename : '_file',
            marker : '/*'
        }))*/
        .pipe(sass.sync()).on('error', notify.onError(function(error) {
            return 'Error al compilar sass.\n Detalles en la consola.\n' +
                error;
        }))
        .pipe(sass({
            outputStyle: 'compressed'
        }))
        .pipe(autoprefixer({
            browsers: ['last 3 versions'],
            cascade: false
        }))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest("./dist/css/"))
        .pipe(notify({
            title: "SASS",
            message: "OK: Archivo compilado"
        }))
        .pipe(browserSync.stream());
});

//Procesar scripts
gulp.task('scripts', function() {
    return gulp.src('./src/js/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'));
});

//Minificar imágenes
gulp.task('image', function() {
    return gulp.src('./src/images/**/*')
        .pipe(imagemin({
            interlaced: true,
            progressive: true,
            optimizationLevel: 5,
            svgoPlugins: [{
                removeViewBox: true
            }]
        }))
        .pipe(gulp.dest('./dist/images/'));
});

//Tarea por default
gulp.task('watch', function() {
    gulp.watch('./src/scss/*.scss', ['sass']); //Vigila cambios en los
    estilos
    gulp.watch("./*.php").on("change", browserSync.reload);
    gulp.watch('./src/js/*.js', ['scripts']);
    gulp.watch('./src/images/**/*', ['image']);
    //gulp.watch('**/*.php').on('change', function () {
    //   browserSync.reload();
    //});
});

//Default task
gulp.task('default', ['serve', 'sass', 'scripts', 'image', 'connect',
    'watch'
]);

main.scss (the one that imports the sass files):

    // BASE
    @import 'base/_reset.scss';
@import 'base/_typography.scss';

//VENDORS (librerías externas)
@import 'vendors/_fontawesome.scss';

//UTILIDADES (variables, funciones, mixins,...)
@import 'utils/_variables.scss';
@import 'utils/_functions.scss';
@import 'utils/_mixins.scss';
//@import 'utils/_helpers.scss';

//COMPONENTES (botones, tablas, carrusel,..)
@import 'components/_buttons.scss';
//@import 'components/_dropdown.scss';
//@import 'components/_tables.scss';

//LAYOUT (elementos estructurales)
@import 'layout/_header.scss';
@import 'layout/_footer.scss';
//@import 'layout/_navigation.scss';
//@import 'layout/_sidebar.scss';
@import 'layout/_forms.scss';
@import 'layout/_grid.scss';

//PAGES (estilos específicos para algunas páginas: home, contacto,...)
//@import 'pages/_home.scss';
//@import 'pages/_contact.scss';

//TEMAS (si se utilizan... por defecto, administrador,..)
//@import 'themes/_theme.scss';
//@import 'themes/_admin.scss';