webpack 4 sass加载程序未解析全局SCSS变量

我一直在尝试使用webpack让SCSS全局变量工作，但在我的任何尝试中，它似乎都无法正确解析路径

配置如下所示（使用electron网页包，扩展默认配置）

使用版本：

    "electron-webpack": "2.7.4",
    "node-sass": "4.13.0",
    "sass-loader": "8.0.0",
    "webpack": "4.41.2",
    "webpack-cli": "3.3.10",
    "webpack-dev-server": "3.9.0",
    "webpack-merge": "4.2.2"

无论我对路径解析/config做了什么尝试/调整，我都会继续收到如下相同的错误：

[start:renderer]  @ multi css-hot-loader/hotModuleReplacement ./src/renderer/index.js
[start:renderer] Child html-webpack-plugin for "index.html":
[start:renderer]      1 asset
[start:renderer]     Entrypoint undefined = index.html
[start:renderer]     [./node_modules/html-loader/dist/cjs.js?minimize=false&url=false!./dist/.renderer-index-template.html] 360 bytes {0} [built]
[start:renderer] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-2!node_modules/rc-tooltip/assets/bootstrap.css:
[start:renderer]     Entrypoint mini-css-extract-plugin = *
[start:renderer]     [./node_modules/css-loader/dist/cjs.js?!./node_modules/rc-tooltip/assets/bootstrap.css] ./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/rc-tooltip/assets/bootstrap.css 4.22 KiB {mini-css-extract-plugin} [built]
[start:renderer]     [./node_modules/css-loader/dist/runtime/api.js] 2.61 KiB {mini-css-extract-plugin} [built]
[start:renderer] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--8-2!node_modules/sass-loader/dist/cjs.js!src/renderer/account/components/Account/Account.scss:
[start:renderer]     Entrypoint mini-css-extract-plugin = *
[start:renderer]     [./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/dist/cjs.js!./src/renderer/account/components/Account/Account.scss] ./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/renderer/account/components/Account/Account.scss 368 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
[start:renderer]     
[start:renderer]     ERROR in ./src/renderer/account/components/Account/Account.scss (./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/renderer/account/components/Account/Account.scss)
[start:renderer]     Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[start:renderer]     SassError: Undefined variable: "$responsive-width".
[start:renderer]             on line 18 of /<path_to_project>/src/renderer/account/components/Account/Account.scss
[start:renderer]     >>     @media only screen and (max-width: $responsive-width) {
[start:renderer]     
[start:renderer]        ---------------------------------------^


[start:renderer] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--8-2!node_modules/sass-loader/dist/cjs.js!src/renderer/shared/components/Panel/Panel.scss:
[start:renderer]     Entrypoint mini-css-extract-plugin = *
[start:renderer]     [./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/dist/cjs.js!./src/renderer/shared/components/Panel/Panel.scss] ./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/renderer/shared/components/Panel/Panel.scss 432 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
[start:renderer] 
[start:renderer]     ERROR in ./src/renderer/shared/components/Panel/Panel.scss (./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/renderer/shared/components/Panel/Panel.scss)      
[start:renderer]     Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[start:renderer]     SassError: ".panel" failed to @extend "%panelColor".
[start:renderer]            The selector "%panelColor" was not found.
[start:renderer]            Use "@extend %panelColor !optional" if the extend should be able to fail.
[start:renderer]             on line 2 of D:\Development\<path>\src\renderer\shared\components\Panel\Panel.scss
[start:renderer]     >>   @extend %panelColor;
[start:renderer]        ----------^

[start:renderer]@multi-css热加载程序/hotModuleReplacement./src/renderer/index.js
[start:renderer]用于“index.html”的子html网页包插件：
[开始：渲染器]1个资源
[start:renderer]入口点未定义=index.html
[start:renderer][./node_modules/html loader/dist/cjs.js？minimize=false&url=false./dist/.renderer index template.html]360字节{0}[builded]
[开始：渲染器]子迷你css提取插件节点_modules/css loader/dist/cjs.js？？ref--6-2！节点模块/rc工具提示/assets/bootstrap.css：
[开始：渲染器]入口点迷你css提取插件=*
[开始：渲染器][./node_modules/css loader/dist/cjs.js？！./node_modules/rc tooltip/assets/bootstrap.css]./node_modules/css loader/dist/cjs.js？？参考-6-2/node_modules/rc tooltip/assets/bootstrap.css 4.22 KiB{mini css extract plugin}[已构建]
[start:renderer][./node_modules/css loader/dist/runtime/api.js]2.61 KiB{mini-css-extract-plugin}[builded]
[开始：渲染器]子迷你css提取插件节点_modules/css loader/dist/cjs.js？？ref--8-2！node_modules/sass loader/dist/cjs.js！src/renderer/account/components/account/account.scss：
[开始：渲染器]入口点迷你css提取插件=*
[开始：渲染器][./node_modules/css loader/dist/cjs.js？！./node_modules/sass loader/dist/cjs.js！。/src/renderer/account/components/account/account.scss]。/node_modules/css loader/dist/cjs？？参考-8-2/node_modules/sass loader/dist/cjs.js/src/renderer/account/components/account/account.scss 368字节{mini css extract plugin}[build][failed][1错误]
[开始：渲染器]
./src/renderer/account/components/account/account.scss（./node_modules/css loader/dist/cjs.js？？ref--8-2！。/node_modules/sass loader/dist/cjs！。/src/renderer/account/components/account/account.scss）中的[start:renderer]错误
[启动：渲染器]模块构建失败（来自./node_modules/sass loader/dist/cjs）：
[start:renderer]SassError:未定义变量：“$responsive width”。
[start:renderer]位于//src/renderer/account/components/account/account.scss的第18行
[开始：渲染器]>>@仅媒体屏幕和（最大宽度：$responsive width）{
[开始：渲染器]
[开始：渲染器]---------------------------------------^
[开始：渲染器]子迷你css提取插件节点\模块/css加载程序/dist/cjs.js？？ref--8-2！节点\模块/sass加载程序/dist/cjs.js！src/renderer/shared/components/Panel/Panel.scss:
[开始：渲染器]入口点迷你css提取插件=*
[开始：renderer][./节点\模块/css加载程序/dist/cjs.js？！./节点\模块/sass加载程序/dist/cjs.js./src/renderer/shared/components/Panel/Panel.scss]。/节点\模块/css加载程序/dist/cjs.js./节点\模块/sass加载程序/dist/cjs.js./src/renderer/shared/components/Panel/Panel/Panel.scss 432字节{迷你css提取插件}[构建][失败][1错误]
[开始：渲染器]
./src/renderer/shared/components/Panel/Panel.scss（./node_modules/css loader/dist/cjs.js？？ref--8-2！。/node_modules/sass loader/dist/cjs！。/src/renderer/shared/components/Panel/Panel.scss）中的[start:renderer]错误
[启动：渲染器]模块构建失败（来自./node_modules/sass loader/dist/cjs）：
[开始：渲染器]SassError:“.panel”无法@extend”%panelColor“。
[开始：渲染器]找不到选择器“%panelColor”。
[开始：渲染器]如果扩展失败，请使用“@extend%panelColor！optional”。
[开始：渲染器]位于D:\Development\\src\renderer\shared\components\Panel\Panel.scss的第2行
[开始：渲染器]>>@extend%panelColor；
[开始：渲染器]----------^

这一切过去都与Webpack2/Babel6一起使用。

---

我们使用了babel 6的模块解析，该模块在babel 7中被删除，因此我将其替换为webpack 4解析别名，这就是升级所有webpack/babel相关软件包时出现上述所有问题的地方

请发布SCSS文件的代码。

[start:renderer]  @ multi css-hot-loader/hotModuleReplacement ./src/renderer/index.js
[start:renderer] Child html-webpack-plugin for "index.html":
[start:renderer]      1 asset
[start:renderer]     Entrypoint undefined = index.html
[start:renderer]     [./node_modules/html-loader/dist/cjs.js?minimize=false&url=false!./dist/.renderer-index-template.html] 360 bytes {0} [built]
[start:renderer] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-2!node_modules/rc-tooltip/assets/bootstrap.css:
[start:renderer]     Entrypoint mini-css-extract-plugin = *
[start:renderer]     [./node_modules/css-loader/dist/cjs.js?!./node_modules/rc-tooltip/assets/bootstrap.css] ./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/rc-tooltip/assets/bootstrap.css 4.22 KiB {mini-css-extract-plugin} [built]
[start:renderer]     [./node_modules/css-loader/dist/runtime/api.js] 2.61 KiB {mini-css-extract-plugin} [built]
[start:renderer] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--8-2!node_modules/sass-loader/dist/cjs.js!src/renderer/account/components/Account/Account.scss:
[start:renderer]     Entrypoint mini-css-extract-plugin = *
[start:renderer]     [./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/dist/cjs.js!./src/renderer/account/components/Account/Account.scss] ./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/renderer/account/components/Account/Account.scss 368 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
[start:renderer]     
[start:renderer]     ERROR in ./src/renderer/account/components/Account/Account.scss (./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/renderer/account/components/Account/Account.scss)
[start:renderer]     Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[start:renderer]     SassError: Undefined variable: "$responsive-width".
[start:renderer]             on line 18 of /<path_to_project>/src/renderer/account/components/Account/Account.scss
[start:renderer]     >>     @media only screen and (max-width: $responsive-width) {
[start:renderer]     
[start:renderer]        ---------------------------------------^


[start:renderer] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--8-2!node_modules/sass-loader/dist/cjs.js!src/renderer/shared/components/Panel/Panel.scss:
[start:renderer]     Entrypoint mini-css-extract-plugin = *
[start:renderer]     [./node_modules/css-loader/dist/cjs.js?!./node_modules/sass-loader/dist/cjs.js!./src/renderer/shared/components/Panel/Panel.scss] ./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/renderer/shared/components/Panel/Panel.scss 432 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
[start:renderer] 
[start:renderer]     ERROR in ./src/renderer/shared/components/Panel/Panel.scss (./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/sass-loader/dist/cjs.js!./src/renderer/shared/components/Panel/Panel.scss)      
[start:renderer]     Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
[start:renderer]     SassError: ".panel" failed to @extend "%panelColor".
[start:renderer]            The selector "%panelColor" was not found.
[start:renderer]            Use "@extend %panelColor !optional" if the extend should be able to fail.
[start:renderer]             on line 2 of D:\Development\<path>\src\renderer\shared\components\Panel\Panel.scss
[start:renderer]     >>   @extend %panelColor;
[start:renderer]        ----------^