Sass 加载程序错误：与 API 架构不匹配的无效选项对象

Question

我将 VueJS 与框架VuetifyJS (v2.0.19) 一起使用。运行npm run serve后出现此错误：

Sass Loader 已使用与 API 架构不匹配的选项对象进行初始化。

我尝试过的：我删除了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

问题

基于https://github.com/vuejs/vue-cli/issues/4513，如果您将 sass-loader 从 v7 升级到 8 或 9，您可能会遇到无效选项的验证错误

vue.config.js（webpack 中 sass-loaderv7 的有效语法）

  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-loader v8.0 重大变化

你应该知道 v8. 有以下重大变化：https : //github.com/webpack-contrib/sass-loader/releases/tag/v8.0.0

• 最低要求的 webpack 版本是 4.36.0
• 最低要求的 node.js 版本是 8.9.0
• 将所有 sass (includePaths, importer, functions) 选项移动到 sassOptions 选项。函数选项不能用作函数，您应该使用 sassOption 作为函数来实现这一点。
• data 选项被重命名为 sourceMap 选项的 prependData 选项默认值取决于 devtool 值（eval/false 值不启用源映射生成）

解决方案v8

正如文档所说， move all sass (includePaths, importer, functions) options to the sassOptions option. The functions option can't be used as Function, you should use sassOption as Function to achieve this. the data option was renamed to the prependData option

sass-loader v9.0 重大变化

你应该知道 v9. 有以下重大变化：https : //github.com/webpack-contrib/sass-loader/releases/tag/v9.0.0

• 突破性变化最低支持的 Nodejs 版本是 10.13
• 默认情况下更喜欢 sass (dart-sass)，强烈建议在 sass (dart-sass) 上迁移
• 删除了 prependData 选项以支持 additionalData 选项，请参阅文档
• 当 sourceMap 为 true 时，sassOptions.sourceMap、sassOptions.sourceMapContents、sassOptions.sourceMapEmbed、sassOptions.sourceMapRoot 和 sassOptions.omitSourceMapUrl 将被忽略。

解决方案 v9

在 ver9 中，您可以在文档中看到https://github.com/webpack-contrib/sass-loader#options ( https://github.com/webpack-contrib/sass-loader#sassoptions , https://github .COM /的WebPack-的contrib /萨斯装载机＃additionaldata），如果我们改变data到additionalData它会修复无效的错误选项。

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

Answer 3

如果您正在使用vue-cli 4并且为了避免此错误，您需要像下面的示例一样更改sass-loaderin的配置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-loader repo上的配置。

如果您使用vue cli 3，它与sass-loader v7not withv8如果您使用vue cli 3并且sass-loader v7先前的配置仍然有效。

祝你好运和问候。

更新（2021）：

正如@gdaniel在评论中所说，sass-loader 团队将选项中的属性从prependData改为additionalData，正如您在以下提交062991588769f2 中看到的那样。

Answer 4

升级到 sass-loader 10 时我遇到了同样的问题。我通过替换为解决了这个问题，prependData如下additionalData所示：

{
  test: /\.scss$/,
  loader: 'sass-loader',
  options: {
    additionalData: `@import 'src/scss/helpers/variables';`
  }
}

Answer 5

indentedSyntax是的一部分sassOptions：

sassOptions: {  indentedSyntax: true  }

例如：

{
    loader: 'sass-loader',
    options: {
        sassOptions: {
            indentedSyntax: true
        }
    }
}

所以 - 更改您的 Webpack 配置以反映这一点。