构建 React 应用程序时 SCSS 加载错误

Question

I am trying to build a React application using Webpack. I get this error, connected with main SCSS file:

ERROR in ./resources/scss/style.scss (./node_modules/css-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/dist/cjs.js!./resources/scss/style.scss)
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?, localsConvention?, onlyLocals?, esModule? }
at validate (C:\Users\User\Documents\Projects\App\client\node_modules\schema-utils\dist\validate.js:96:11)      
at Object.loader (C:\Users\User\Documents\Projects\App\client\node_modules\css-loader\dist\index.js:36:28)    

I can't understant, what's wrong. There are the fragments of my package.json and style.scss :

package.json

  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
  }

style.scss

@import "~bootstrap/scss/bootstrap";

body, html {
  height: 100%;
  background-color: rgba(0,0,0,.018);
  color: rgba(0,0,0,.75);
}

Answer 1

I thought that the problem was in dependencies, but I fixed it by deleting option minimize: true in webpack.config.js .