webpack - импорт значков шрифтов mdi не работает, но другие файлы s css работают

Question

Итак, мне удалось установить и использовать bootstrap с помощью загрузчика s css в моем проекте веб-пакета.

, что касается структуры папок, это довольно просто:

dist
 - app.js
 - bundle.js
 - index.html
node_modules
 - bootstrap
 - @mdi/font
 - jquery, tether,...
src
 - css
    - style.css
 - scss
    - style.scss
 index.js
package.json
webpack.config.js 

Я хочу импортировать оба шрифта bootstrap и mdi

в мой файл style.s css, который я импортирую bootstrap, используя:

@import "~bootstrap";

, так что в основном это ' Достаточно будет импортировать и сюда файлы. и так как jquery не вовлечено, это должно быть.

однако, даже когда я пытаюсь импортировать .min.css напрямую, я не могу запустить npm run build.

@import "~bootstrap";
@import "~@mdi/font/css/materialdesignicons.min.css";

файл webpack.config. js на самом деле должен покрыть все файлы s css:

const path = require('path');
var webpack = require('webpack');

module.exports = {

    mode: 'production',

    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },

    performance: {hints: false},

    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.(scss)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function(){
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            }
                        }
                    },
                    { loader: 'sass-loader'},
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ],
            },
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                }, {
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ],
    },

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],

};

ошибка:

ERROR in ./src/scss/style.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/dist/cjs.js!./src/scss/style.scss)     
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot destructure property 'file' of 'undefined' as it is undefined.
    at C:\dev\projects\htdocs\port\node_modules\postcss-advanced-variables\index.js:319:9
 @ ./src/scss/style.scss 2:26-193
 @ ./src/index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2