Scssコンパイル、webpackの設定について

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
webpack５系でpug、scssが利用できる静的ページのテンプレートを
作成しようと考えています。
ビルド実行時にscssの変数・関数が定義されていないとのエラーが発生します。
変数定義が関係ないscssファイルのimportは、問題ないのですが
_variables.scss、_mixin.scssのimportに問題が発生しているようです。

webpackの設定、loader,pluginの導入などでの解決策は何かありますでしょうか？

発生している問題・エラーメッセージ

エラーメッセージ
ERROR in ./src/styles/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.

webpack.config.js

// 絶対パスを取得する為にpathモジュールを利用
const path = require('path');
// CSSを別ファイルとして出力するプラグイン
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// ビルドしたファイル（css,js）を含んだhtmlファイルを自動で出力するプラグイン
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 不要ファイルを自動的に削除するプラグイン const{}の形で記述するのは、clean-webpack-pluginに
// 含まれる機能からcleanWebpackPlugin機能のみを利用するから。
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 作業フォルダ内のファイル検索・取得を行うプラグイン
const globule = require('globule');


const app = {
    // モードの設定
    mode: 'development',
    target: 'web',

    // ソースマップの出力設定（複数の出力タイプが用意されている）
    devtool: "source-map",
    // node_modules を監視（watch）対象から除外
    watchOptions: {
        ignored: /node_modules/  //正規表現で指定
    },
    // エントリーポイントの設定
    entry: './src/scripts/main.js',
    // 出力の設定
    output: {
        // 出力先パス（絶対パス）
        path: path.resolve(__dirname, './dist'),
        // 出力ファイル名(元ファイル名+ハッシュ)
        filename: 'scripts/[name]-[contenthash].js',
        publicPath: '/',
    },
    // 開発用ローカルサーバーの設定
    devServer: {
        // サーバーの起点ディレクトリ（dist）
        contentBase: path.join(__dirname, './dist'),

        // デフォルトでは、localhost
        // 0.0.0.0に設定すると同一ネットワーク内のスマホなどから、http://自分のパソコンのIPアドレス:8080/でアクセスできる
        //host: "0.0.0.0",
        // サーバー起動時にブラウザを開くかどうか
        open: true,
        // port設定 デフォルトは8080
        //port: 8090
    },
    // webpackの詳細ログ出力
    // stats: {
    //     children: true,
    // },
    module: {
        rules: [
            {
                test: /.js$/,
                // node_modules以下のファイルは除外
                exclude: /node_modules/,
                use: [
                    {
                        // Babel を利用する
                        loader: 'babel-loader',
                        // Babel のオプションを指定する
                        options: {
                            // プリセットを指定することで、ES2020 を ES5 に変換
                            presets: [
                                [
                                    // 使用するプリセットの指定
                                    "@babel/preset-env",
                                    {
                                        // useBuiltInsオプションで 'usage' と設定するとコードを解析し、必要なpolyfillを
                                        // corejsから自動でimportする。
                                        useBuiltIns: 'usage',
                                        // corejsのバージョン指定
                                        corejs: 3
                                    }
                                ]
                            ]
                        },
                    },
                ],
            },
            {
                // ローダーの処理対象ファイル
                test: /.(css|scss|sass)$/,
                // ルール設定（loaderの適用は下から上の順）
                use: [
                    {
                        // CSSを別ファイルとして出力するように MiniCssExtractPlugin のローダーを設定
                        loader: MiniCssExtractPlugin.loader,
                    },
                    {
                        // CSSをバンドルするためのローダー
                        loader: 'css-loader',
                        options: {
                            // URLの解決を無効設定 (元ファイルのurl() メソッドは変換されずに出力される)
                            url: false,
                            // ソールマップを有効に
                            sourceMap: true,
                            // css loaderの前に適用するloaderの数を設定
                            importLoaders: 2,
                            // 0 => no loaders (default);
                            // 1 => postcss-loader;
                            // 2 => postcss-loader, sass-loader
                        },
                    },
                    {
                        // PostCSS(autoprefixer、postcss-sort-media-queries)の設定
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    // ベンダープレフィックスを自動付与 ターゲットブラウザは.browserslistrcで設定
                                    // css gridへの対応はここで設定
                                    require("autoprefixer")({ grid: true }),
                                    // メディアクエリの統合 （ mobile-first でソート ）
                                    require("postcss-sort-media-queries")({ sort: 'mobile-firstl' }),
                                ],
                            },
                            // PostCssでもソールマップを有効に
                            sourceMap: true,
                        },
                    },
                    {
                        // SassをCSSへ変換するローダー
                        loader: 'sass-loader',
                        options: {
                            // dart-sassを優先
                            sassOptions: {
                                // fibersパッケージを読み込み
                                fiber: require('fibers'),
                            },
                            // ソールマップを有効に
                            sourceMap: true,
                        },
                    },
                    {
                        // Sassのimportをまとめるローダー
                        loader: 'import-glob-loader',
                    },
                ]
            },
            {
                // ローダーの処理対象ファイル
                test: /.(gif|png|jpe?g|svg)$/i,
                // webpack5の Asset Modules 設定
                type: 'asset/resource',
                // 出力設定
                generator: {
                    // [name]はオリジナルのファイル名、[ext]はオリジナルの拡張子
                    filename: 'images/[name]-[contenthash][ext]'
                },
                use: [
                    {
                        // PNG, JPEG, GIF, SVG, WEBPの画像圧縮ができるloader
                        loader: 'image-webpack-loader',
                        options: {
                            // jpgの圧縮設定
                            mozjpeg: {
                                progressive: true,
                                quality: 65,
                            },
                            // pngの圧縮設定
                            pngquant: {
                                quality: [0.80, 0.90],
                            },
                        }
                    }
                ],
            },
            {
                // ローダーの処理対象ファイル
                test: /.pug/,
                // 除外ファイル
                exclude: /node_modules/,
                use: [
                    {
                        // html-loaderで imgのsrc属性が処理されるのでrequire()の記述が削除できる。
                        loader: 'html-loader',
                    },
                    {
                        // .pugのファイルを.htmlに変換
                        loader: 'pug-html-loader',
                        options: {
                            // 改行オプション
                            pretty: true,
                        }
                    }
                ]
            }
        ]
    },
    // プラグイン設定
    plugins: [
        // distディレクトリのファイルをビルド時に一旦削除
        new CleanWebpackPlugin({
        }),
        // バンドルしたCSSを別ファイルとして出力するプラグイン
        new MiniCssExtractPlugin({
            // 出力ファイル名設定（dist/scripts/mian.jsからの相対パス style-ハッシュ値.css）
            filename: './styles/style-[contenthash].css'
        }),
    ]
} // app end


// globuleパッケージで .pugファイルを配列に格納
const templates = globule.find('./src/templates/*.pug', {
    ignore: ['./src/templates/**/_*.pug']
})
// .pugファイルの分、HtmlWebpackPluginを発火
templates.forEach((template) => {
    const fileName = template.replace('./src/templates/', '').replace('.pug', '.html')
    app.plugins.push(
        new HtmlWebpackPlugin({
            filename: `${fileName}`,
            template: template,
        })
    )
})

module.exports = app