未捕获的类型错误：无法读取未定义的属性“局部变量”

Question

我已经制作了在我的网络应用程序中使用的bundle.js和bundle.css，

我的 package.json 如下所示：

  "dependencies": {

    "bootstrap": "^4.5.3",

    "jquery": "^3.5.1",

    "popper.js": "^1.16.1"

  },

  "devDependencies": {

    "@babel/core": "^7.12.10",

    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",

    "@babel/preset-env": "^7.12.11",

    "babel-loader": "^8.2.2",

    "css-loader": "^5.0.1",

    "file-loader": "^6.2.0",

    "mini-css-extract-plugin": "^1.3.3",

    "node-sass": "^5.0.0",

    "sass-loader": "^10.1.0",

    "style-loader": "^2.0.0",

    "url-loader": "^4.1.1",

    "webpack": "^5.11.0",

    "webpack-cli": "^4.2.0"

  },

我的 webpack.config.js：

const path = require('path');

const webpack = require('webpack');

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env, argv) => {

    return {

        //Define entry point

        entry: ['./src/index.js', './src/css/index.scss'],

        //Define output point

        output: {

            path: path.resolve(__dirname, 'wwwroot/dist'),

            filename: 'bundle.js'

        },

        module: {

            rules: [

                {

                    test: /\.s[c|a]ss$/,

                    include: path.resolve(__dirname, 'src'),

                    use: [

                        'style-loader',

                        MiniCssExtractPlugin.loader,

                        'css-loader',

                        'sass-loader'

                    ]

                },

                {

                    test: /\.js$/,

                    include: path.resolve(__dirname, 'src'),

                    loader: 'babel-loader',

                    options: {

                        presets: ["@babel/preset-env"],

                        plugins: ['@babel/plugin-proposal-object-rest-spread']

                    }

                },

            ]

        },

Answer 1

尝试将 MiniCssExtractPlugin 的选项 esModule 设置为 falseuse: [    'style-loader',    {        loader: MiniCssExtractPlugin.loader,        options: {            esModule: false,        },    },    'css-loader',    'sass-loader']

Answer 2

不要将“style-loader”与 mini-css-extract-plugin 一起使用，修改您的规则以匹配以下内容：{    test: /\.s[c|a]ss$/,    include: path.resolve(__dirname, 'src'),    use: [            //'style-loader',            MiniCssExtractPlugin.loader,            'css-loader',            'sass-loader'         ]},您可以在这里找到更多详细信息：https ://github.com/webpack-contrib/mini-css-extract-plugin/issues/613

Answer 3

没有MiniCssExtractPlugin ：use: [    {      loader: "style-loader",      options: {        esModule: false,      },    },    "css-loader",    "sass-loader",  ]