Webpack 网页包-导入mdi字体图标赢得'；不起作用，但其他scss文件起作用

所以，我设法在我的webpack项目中使用scss loader安装和使用引导程序

至于文件夹结构，它非常简单：

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 

我想以相同的方式导入引导和mdi字体

在my style.scss文件中，我使用以下方法导入引导：

@import "~bootstrap";

所以，基本上在这里导入文件就足够了。由于没有任何jquery参与，所以应该是它

但是，即使我尝试直接导入

.min.css

，我也无法运行

npm run build

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

webpack.config.js文件实际上应涵盖所有scss文件：

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