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

【问题标题】：Sass Loader Error: Invalid options object that does not match the API schemaSass 加载程序错误：与 API 架构不匹配的无效选项对象
【发布时间】：2020-01-30 17:33:28
【问题描述】：

我正在使用带有框架 VuetifyJS (v2.0.19) 的 VueJS。运行 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"
  ]
}

如何解决这个问题？

【问题讨论】：

标签： node.js vue.js npm sass node-modules

【解决方案1】：

似乎与此处相同的问题： https://github.com/JeffreyWay/laravel-mix/issues/2206

解决办法是

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

【讨论】：

降级在我看来从来都不是最优雅的方法，但它是唯一对我有用的方法。 stackoverflow.com/users/5302733/… 下面的答案虽然完整，但给我留下了同样的错误。
2020 年 5 月为我工作
2020 年 5 月为我工作。看起来人们还在谈论它：github.com/vuejs/vue-cli/issues/4513
这是 Nuxt 上最快（也是最简单）的修复路径
8.0.0 对我不起作用（同样的错误），但 7.1.0 起作用了。 Nuxt 2.14.

【解决方案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 作为 Function 来实现这一点。
数据选项被重命名为 prependData 选项默认值 sourceMap 选项的值取决于 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 选项以支持附加数据选项，请参阅文档
当sourceMap为真时，sassOptions.sourceMap， sassOptions.sourceMapContents，sassOptions.sourceMapEmbed， sassOptions.sourceMapRoot 和 sassOptions.omitSourceMapUrl 将忽略。

解决方案 v9

如您在文档 https://github.com/webpack-contrib/sass-loader#options（https://github.com/webpack-contrib/sass-loader#sassoptions、https://github.com/webpack-contrib/sass-loader#additionaldata）中看到的那样，在 ver9 中，如果我们将 data 更改为 additionalData，它将修复无效选项错误。

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

【讨论】：

【解决方案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-loader repo上的配置。

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

祝你好运和问候。

更新（2021 年）：

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

【讨论】：

解决了我的问题。谢谢。
更改为 data -> prependData 和 includePaths 到 sassOptions.includePaths（在新对象内）。所有这些都发生在具有sass 键的对象内。
它解决了我的问题。该文档对用户不是很友好，但您给了它一个更好的方向。
他们已经从使用数据 prependData 到 additionalData

【解决方案4】：

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

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

【讨论】：

是的，新的 API 实现了 additionalData 选项?

【解决方案5】：

indentedSyntax 是sassOptions 的一部分：

sassOptions: {  indentedSyntax: true  }

例如：

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

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

【讨论】：

我无法让它运行并在 CLI 中收到错误以使用 new webpack.LoaderOptionsPlugin({ 因为 load options 已过时. 我正在使用 vue.config.js (Vue CLI 3) 来配置 webpack。您能否发布更多详细信息。
你是如何创建应用的（vue init with template, vue create），另外：发布 vue.config.js

【解决方案6】：

在我的情况下，我不得不降级 sass-loader，之后当我运行 ng serve 时，我在终端上发出了真正的错误，在你的情况下应该是 vue-cli-service 我认为这是sass-loader v8的问题，将进一步挖掘

与此同时，这可能会有所帮助：在 package.json 中，编辑 sass-loader 以读取 "sass-loader": "7.0.1",

【讨论】：

【解决方案7】：

将data 更改为prependData。最终结果（vue.config.js）：

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/sass/variables.sass"`
            }
        }
    }
}

【讨论】：

【解决方案8】：

对于那些仍在苦苦挣扎并且仍然没有 sass-loader v8 解决方案的人：

const includePaths = [
  'mypath'
]

module.exports = {
  // ... other config here

  css: {
    extract: false,
    loaderOptions: {
      sass: {
        sassOptions: { // <<<< This wrapper is needed!
          // ... all options here, e.g. prependData, includePaths a.s.o.
          includePaths  
        }
      }
    }
  },

  // ... other config here
}

【讨论】：

嗨..感谢您的解决方案。 sassOptions 对象实际上应该是什么？

【解决方案9】：

如果你使用的是更新版本的 sass-loader，你需要使用额外的数据而不是数据

module.exports = {
    css: {
      loaderOptions: {
        sass: {
            additionalData: `@import "@/styles/base.scss";`
        }
      }
    }
  };

【讨论】：

【解决方案10】：

基于current docs 并假设 sass-loader 8+ 这是全局导入的语法。这会从src/styles/..whatever 导入一个文件

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "~@/styles/[rest of path to import]";`,
      },
    },
  },
}

【讨论】：

【解决方案11】：

我将 Vue 3 与使用 Webpack 4 的 Vue CLI 4.5 一起使用并且面临同样的问题。

这对我有用：

升级到 sass-loader 10：

npm uninstall -D sass-loader
npm install -D sass-loader@^10

Vue.config.js：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/scss/colors.scss";`
      }
    }
  }
}

参考：https://www.catagec.com/blog/load-a-global-scss-file-in-vue-3/

【讨论】：