Main extension is forced upon nested @import's

[Tom]

runtime.scss (SCSS):

@import "../../../node_modules/bulma/sass/utilities/initial-variables.sass"; // (SASS)

$breakpoints: (
  'mobile': 0,
  'tablet': $tablet,
  'desktop': $desktop,
  'widescreen': $widescreen,
  'fullhd': $fullhd
);

$breakpointOrder: (
  'mobile',
  'tablet',
  'desktop',
  'widescreen',
  'fullhd'
);

sass-variables.js

// eslint-disable-next-line
import variables from 'sass-extract-loader!@/runtime.scss'

export default variables

Breaks with:

Module build failed: Error: Can not determine imported file for url '../../../node_modules/bulma/sass/utilities/initial-variables.sass.scss' imported in /srv/http/catchall-webapps.localdomain/project-frontend/src/runtime.scss
    at options.error (/srv/http/catchall-webapps.localdomain/project-frontend/node_modules/node-sass/lib/index.js:291:26)
 @ ./src/sass-variables.js 2:0-73
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8090 webpack/hot/dev-server ./src/main.js

Main error being the path:

initial-variables.sass.scss
                      ^^^^^

There seems to be .scss extension enforced for @import calls at all costs if the main import was .scss. Likewise, if the main import is .sass, all calls to @import will be enforced with .sass.