webpack 4 sass-loader not resolving global SCSS variables - sass

Question

I've been trying to get SCSS global variables to work using webpack, but it doesn't seem to resolve the paths correctly in any attempt I make.
The config looks as following (using electron-webpack, extending the default config)
const path = require('path');
const merge = require('webpack-merge');
const webpackRenderer = require('electron-webpack/webpack.renderer.config.js');
const cssnano = require('cssnano');
const { extend, find, flow, has } = require('lodash');
const isProd = process.env.NODE_ENV === 'production';
function replaceLoader(config, test, callback) {
const rule = find(config.module.rules, (r) => String(r.test) === String(test));
if (rule) {
extend(rule, callback(rule));
}
return config;
}
// Since we want to uses SCSS modules, we need to replace the
// default SCSS loader config that ships with electron-webpack.
function replaceSassLoader(config) {
const minimize = isProd
? [
{
loader: 'postcss-loader',
options: {
plugins: [cssnano({ preset: 'default' })]
}
}
]
: [];
return replaceLoader(config, /\.scss$/, () => ({
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]'
},
sourceMap: !isProd,
importLoaders: 1
}
},
...minimize,
{
loader: 'sass-loader',
options: {
data:
'#import "~common/stylesheets/variables"; #import "~common/stylesheets/mixins"; #import "~common/stylesheets/themes";',
includePaths: [path.resolve(__dirname, '..', 'src/common')],
sourceMap: !isProd
}
}
]
}));
}
module.exports = async (env) => {
const config = await webpackRenderer(env);
const newConfig = merge.smart(config, {
resolve: {
alias: {
common: path.resolve(__dirname, '..', 'src/common'),
}
}
});
return flow(replaceSassLoader)(newConfig);
};
Used versions:
"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"
Whatever attempt/tweaks I do to the path resolving/config I continue to receive the same errors like these:
[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] ----------^
It all used to be working with webpack 2/babel 6.
We used module resolving from babel 6, which was removed in babel 7, so I replaced it with the webpack 4 resolution aliases and that was the point where all the above issues arised when upgrading all the webpack/babel related packages