Why does gulp-sass swear when building a custom bootstrap with includePaths?

Question

Sass

I'm trying to compile a custom version of bootstrap using scss sources.
At the moment it goes like this

// Core variables and mixins
@import "../../vendor/bootstrap/scss/variables"
@import "../../vendor/bootstrap/scss/mixins"
@import "../../vendor/bootstrap/scss/custom"

// Reset and dependencies
@import "../../vendor/bootstrap/scss/normalize"
@import "../../vendor/bootstrap/scss/print"

// Core CSS
@import "../../vendor/bootstrap/scss/reboot"
...

Everything compiles fine, but I would like to get rid of long paths and delegate this to the == gulp-sass compiler, I add the includePaths option to gulp-sass :

...
.pipe(sass({
  outputStyle: 'expanded',
  includePaths: ['app/vendor/bootstrap/scss']
}))
...

and import now like this

@import "variables"
@import "mixins"
@import "custom"
...

Everything seems to be fine, the imports are going, but as soon as a mixin is found in one of the imported files, gulp-sass gives an error

[19:46:59] Starting 'styles'...
[19:46:59] gulp-notify: [Styles] app\vendor\bootstrap\scss\_reboot.scss
Error: no mixin named hover-focus

       Backtrace:
        app/vendor/bootstrap/scss/_reboot.scss:167
        on line 167 of app/vendor/bootstrap/scss/_reboot.scss
>>   @include hover-focus {
   -----------^

[19:46:59] Finished 'styles' after 268 ms

Question: why is this happening? Why don't files imported after mixins see these same mixins?

Answer 1

Oh, as always, the problem was solved in the most banal, albeit extremely non-obvious way. =\
You had to explicitly set the file extension.

// Core variables and mixins
@import "variables.scss"
@import "mixins.scss" <== 
@import "custom"

// Reset and dependencies
@import "normalize"
@import "print"

// Core CSS
@import "reboot"
@import "type"
...

Although I still do not understand why this is so important for the compiler, I would be grateful for an explanation.