webpack_css-loader报错

目录

• 错误详情
• 原因分析
• 解决方法
• 参考链接

错误详情

• 当调用webpack命令进行打包时，出现如下命令

　ERROR in ./main.css (./node_modules/css-loader/dist/cjs.js?minimize!./main.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

• options has an unknown property 'minimize'. These properties are valid:
  object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }
  at validate (C:\Users\12203\Desktop\webpack-practice\node_modules\schema-utils\dist\validate.js:104:11)
  at Object.loader (C:\Users\12203\Desktop\webpack-practice\node_modules\css-loader\dist\index.js:36:29)
  @ ./main.css 2:12-94 9:17-24 13:15-29
  @ ./main.js 2:0-21

原因分析

• 这是因为版本更新的问题，css-loader中已经没有minmize这一属性了。webpack 3.0 之后以及 css-loader 1.0 以上已经将 minimize 这个属性去掉了导致报错。

  "devDependencies": {
    "css-loader": "^5.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.16.0",
    "webpack-dev-server": "^3.11.2"
  }

解决方法

删去minimize属性，或者使用最新的属性

css-loader

    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }

参考链接

CSS Loader has been initialised using an options object that does not match the API schema.