Sass Loader错误:与API模式不匹配的无效选项对象

Question

我在框架VueJS中使用VuetifyJS (v2.0.19)。我在运行npm运行服务后会出现这个错误

Sass Loader已使用与API架构不匹配的options对象初始化。

我尝试过的是:我删除了node_modules文件夹，并重新安装/更新了所有npm包和node.js，使其成为最新的稳定版本。

完全错误消息：

 error  in ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/home/do/Desktop/A/Projects/Ral/AppCLI3/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:50:11)
    at Object.loader (/home/do/Desktop/A/Projects/Ral/AppCLI3/node_modules/sass-loader/dist/index.js:36:28)

 @ ./node_modules/vuetify/src/components/VRangeSlider/VRangeSlider.sass 4:14-208 14:3-18:5 15:22-216
 @ ./node_modules/vuetify/lib/components/VRangeSlider/VRangeSlider.js
 @ ./node_modules/vuetify/lib/components/VRangeSlider/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.2.115:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/vuetify/src/styles/main.sass

我的package.json：

  {
  "name": "app",
  "version": "0.1.0",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.2.1",
    "fibers": "^4.0.1",
    "firebase": "^7.0.0",
    "material-icons": "^0.3.1",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-flickity": "^1.2.1",
    "vue-router": "^3.1.3",
    "vuetify": "^2.0.19",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@mdi/font": "^4.4.95",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-pwa": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-prettier": "^5.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.5.1",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^5.2.3",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.12.0",
    "prettier": "1.18.2",
    "sass-loader": "^8.0.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-loader": "^15.7.1",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {
      "no-console": "off"
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

如何解决这个问题？

Answer 1

与这里的问题相同：https://github.com/JeffreyWay/laravel-mix/issues/2206

解决办法是

npm uninstall --save-dev sass-loader
npm install --save-dev sass-loader@7.1.0

Answer 2

问题

基于validation-error，如果确实将sass-loader从v7升级到8或9，则可能遇到了无效选项的sass-loader：

Vue.config.js(webpack中sass-loaderv7 7的有效语法)

  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/styles/variables/index.scss";`
      }
    }
  }

错误

object:
    ValidationError: Invalid options object. Sass Loader has been
    initialized using an options object that does not match the API schema.
      - options has an unknown property 'data'. These properties are valid:

sass-Loaderv8.0中断更改

你应该知道v8。在破变以下

• webpack版最低要求为4.36.0
• 最低要求的node.js版本是8.9.0
• 将所有sass (includePaths、导入程序、函数)选项移到sassOptions选项中。函数选项不能用作函数，您应该使用sassOption作为函数来实现这一点。
• 数据选项被重命名为prependData选项，sourceMap选项的默认值取决于devtool值(eval/false值不启用源地图生成)

解决方案v8

就像医生说的：

• 将所有sass (includePaths、importer、functions)选项移到sassOptions选项中。functions选项不能用作函数，您应该使用sassOption作为函数来实现这一点。
• data选项被重命名为prependData选项。

sass-Loaderv9.0破坏更改

你应该知道v9。在破变以下

• 中断更改最低支持Nodejs版本为10.13
• 默认使用sass (dart- sass )，强烈建议在sass (dart-sass)上迁移。
• 删除prependData选项以支持additionalData选项，请参阅docs
• 当sourceMap为真时，sassOptions.sourceMap、sassOptions.sourceMapContents、sassOptions.sourceMapEmbed、sassOptions.sourceMapRoot和sassOptions.omitSourceMapUrl将被忽略。

解决方案v9

在ver9中，正如您在选项、sassOption、additionalData中看到的那样，如果我们将data更改为additionalData，它将修复无效的选项错误。

  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/styles/variables/index.scss";`
      }
    }
  }

Answer 3

如果您正在使用vue-cli 4，并且为了避免此错误，您需要更改sass-loader在vue.config.js中的配置，如下面的示例所示，之后将修复该错误。

const path = require('path');

module.exports = {
  chainWebpack(config) {
    config
      .entry('app')
      .clear()
      .add('./src/core/main.js')
      .end();
    config.resolve.alias
      .set('~', path.join(__dirname, './src'))
      .set('@', path.join(__dirname, './src/core'))
      .set('#', path.join(__dirname, './src/modules'))
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, 'src/core/')
          ],
          indentedSyntax: true,
        },
        prependData: '@import "~@/assets/sass/main.scss"',
      },
    },
  },
  assetsDir: '@/assets/',
}

不要忘记指定您自己的配置。请查看sass装载机回购上的配置。

如果使用vue cli 3，则它适用于sass-loader v7而不是v8，如果使用vue cli 3和sass-loader v7，前面的配置仍然有效。

祝你好运和问候。

更新(2021年)：

正如@gdaniel在评论中所说的，sass加载程序团队在选项中从prependData更改为additionalData属性，如下面的062991588769f2所示。