Combine multiple less file using gulp and convert to css

Question

I have multiple less files as you can see below:

master.less

@import "_a";
@import "_b";

_a.less

@x: 12px;

_b.less

body {
  font-size: @x;
}

And i using this gulp task to combine all above less file and then convert that to single css file:

gulp.task('less', function () {
    log('Compiling Less --> CSS');

    return gulp
        .src(config.less)
        .pipe($.plumber({errorHandler: swallowError}))
        .pipe($.sourcemaps.init())
        .pipe($.less())
        .pipe(concat('style.css'))
        .pipe($.autoprefixer())
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest(config.tmp + '/css'));
});

But i get this error:

Error in plugin "gulp-less"
Message:
    variable @x is undefined in file /Users/me/Documents/Java/Projects/project/src/main/webapp/less/aa/_b.less line no. 2
Details:
    type: Name
    filename: /Users/me/Documents/Java/Projects/project/src/main/webapp/less/aa/_b.less
    index: 20
    line: 2
    callLine: NaN
    callExtract: undefined
    column: 13
    extract: body {,  font-size: @x;,}
    lineNumber: 2
    fileName: /Users/me/Documents/Java/Projects/project/src/main/webapp/less/aa/_b.less

How can o resolve this problem?

NOTE

I don't want to import _a.less in _b.less, i think gulp-less plugin should do this automatically when i imported _a.less in master.less.