生产构建因以下错误而失败：
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)
使用以下Webpack模板：http://vuejs-templates.github.io/webpack/，已更新为Webpack 4并遇到了构建问题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"
]
}
我已经在项目根目录中使用grep -rl 'minimize' .进行了检查，但是没有找到任何相关选项。 Wth ..
答案 0 :(得分：4)
在更新到Webpack 4并使用MiniCssExtractPlugin时，我也遇到了此错误
我能够使用旧版本的ccs-loader来消除错误并获得成功的构建
这些版本对我有用
"devDependencies": {
"css-loader": "1.0.1",
OR
"css-loader": "^0.28.0",
css-loader 2 *和3 *给了我错误。
测试发布后更新：使用旧版本的css-loader，导致在浏览器中呈现网站时无法加载css。因此，这似乎不是解决方案。
答案 1 :(得分：2)
我喜欢webpack中的postcss这个问题。 原因是旧版本使用语法：
{
loader: 'postcss-loader',
options: {
plugins: postCSSPlugins
}
}
选项中的新版本在插件之前使用嵌套的postcssOptions：
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: postCSSPlugins
}
}
}
答案 2 :(得分：0)
我在升级到webpack 4时遇到了类似的问题。我使用Vue.js CLI生成了build/utils.js文件，该文件根据我是在开发环境还是生产环境中而有效地具有可配置的webpack。
自动生成（升级后失败）代码中的相关utils.js行：
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.loader({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
我尝试了简单的“让我们来更新模块”。
var ExtractTextPlugin = require('mini-css-extract-plugin')
这给了我您所犯的错误。在弄乱了文件之后，我使用了“复活节彩蛋故障排除策略”，发现我可以执行以下操作并使它正常工作。起作用的内容如下：
npm i extract-loader --save-dev
然后修改build/utils.js：
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
// minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ['extract-loader'].concat(loaders)
// return ExtractTextPlugin.loader({
// use: loaders,
// fallback: 'vue-style-loader'
// })
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
注意，我注释了第9行，这是我的错误的根源。我还通过mini-css-extract-plugin模块删除了对extract-loader的唯一依赖。
// minimize: process.env.NODE_ENV === 'production',
现在我必须弄清楚为什么eslint不喜欢我的Vue语法。