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

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 设置为 false

use: [

    '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",

  ]