Production build fails with the following error:
ValidationError: Invalid options object. CSS Loader has been initialised 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? }
at validate (/Users/username/Sites/projectname/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:85:11)
at Object.loader (/Users/username/Sites/projectname/node_modules/css-loader/dist/index.js:34:28)
Using this webpack template: http://vuejs-templates.github.io/webpack/, updated to Webpack 4 and faced build issues, package.json:
{
"name": "projectname",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config webpack.config.js --port 3000 --hot",
"start": "npm run dev",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"@vue/cli-service": "^3.2.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"cross-env": "^5.2.0",
"css-loader": "^3.2.1",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"style-loader": "^1.0.1",
"swiper": "^4.5.0",
"v-tabs-router": "^1.4.0",
"vee-validate": "^2.1.0-beta.9",
"vue": "^2.5.2",
"vue-awesome-swiper": "^3.1.3",
"vue-backtotop": "^1.6.1",
"vue-carousel": "^0.18.0",
"vue-cleave-component": "^2.1.2",
"vue-instant": "^1.0.2",
"vue-jsonp": "^0.1.8",
"vue-magic-line": "^0.2.1",
"vue-masked-input": "^0.5.2",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.2",
"vue-select": "^2.5.1",
"vue-slider-component": "^2.8.0",
"vue-smooth-scroll": "^1.0.13",
"vuejs-datepicker": "^1.5.3",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^5.0.2",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.2.0",
"node-notifier": "^5.1.2",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"rimraf": "^2.6.0",
"sass-loader": "^8.0.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^14.2.2",
"vue-resource": "^1.5.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I've checked with grep -rl 'minimize' .
in a project root, but didn't found any related options. Wth..
I had like this problem with postcss in webpack. The reason was that old version uses syntax:
{
loader: 'postcss-loader',
options: {
plugins: postCSSPlugins
}
}
While new version in options uses nested postcssOptions before plugins:
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: postCSSPlugins
}
}
}