web-dev-qa-db-fra.com

CSS Loader a été initialisé à l'aide d'un objet d'options qui ne correspond pas au schéma d'API

La génération de production échoue avec l'erreur suivante:

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)

En utilisant ce modèle Webpack: http://vuejs-templates.github.io/webpack/ , mis à jour vers Webpack 4 et rencontré des problèmes de construction, 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"
  ]
}

J'ai vérifié avec grep -rl 'minimize' . dans une racine de projet, mais n'a trouvé aucune option associée. Wth ..

vue.jswebpackcss-loader
2
Alexander Kim

J'ai également rencontré cette erreur lors de la mise à jour vers webpack 4 et de l'utilisation de MiniCssExtractPlugin

J'ai pu éliminer l'erreur et obtenir une construction réussie en utilisant une ancienne version de ccs-loader

Ces versions ont fonctionné pour moi

 "devDependencies": {
   "css-loader": "1.0.1",

OR

   "css-loader": "^0.28.0",

css-loader 2 * et 3 * m'ont donné l'erreur.

MISE À JOUR après le test de publication: l'utilisation de l'ancienne version du chargeur css fait échouer le chargement du css lors du rendu du site Web dans un navigateur. Cela ne semble donc pas être une solution.

2
Logi Rush

J'ai eu un problème similaire lors de la mise à niveau vers webpack 4. J'ai utilisé la CLI Vue.js qui a généré un build/utils.js fichier qui a effectivement un webpack configurable selon que je suis dans un environnement de développement ou de production.

Pertinent utils.js lignes dans le code généré automatiquement (échec après la mise à niveau):

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')
  }
}

J'ai essayé le simple, "Mettons simplement à jour le module.":

var ExtractTextPlugin = require('mini-css-extract-plugin')

Ce qui m'a donné l'erreur que vous aviez. Après avoir beaucoup dérangé avec les fichiers, j'ai utilisé la "Stratégie de dépannage de Easter Egg" et j'ai découvert que je pouvais faire ce qui suit et le faire fonctionner. Ce qui a fonctionné était le suivant:

npm i extract-loader --save-dev

puis modifiez 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')
  }
}

Remarquez, j'ai commenté la ligne 9, qui est la source de mon erreur. J'ai également supprimé ma seule dépendance au mini-css-extract-plugin avec le extract-loader module.

      // minimize: process.env.NODE_ENV === 'production',

Maintenant, je dois comprendre pourquoi eslint n'aime pas ma syntaxe Vue.

0
Cal Abel

J'avais le même problème après avoir exécuté la commande yarn upgrade --latest.

Il a changé la version de sass-loader de 7.1.0 à 8.0.0. Après cela, obtenir la même erreur.

Il peut y avoir des changements dans les options de sass-loader et à cause de cela, cette erreur s'est produite. Vous pouvez vérifier la version: https://github.com/webpack-contrib/sass-loader/releases et les options mises à jour https://github.com/webpack-contrib/sass- chargeur

Essayez de supprimer/modifier les options de sass-loader, qui peuvent vous aider à le résoudre.

J'espère que cela peut vous aider, ce serait bien si vous pouviez partager le fichier webpack.config.js.

Vive ~

0
Ajay Patel