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

Question

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

Sass 加载程序已使用与 API 模式不匹配的选项 object 进行了初始化。

我尝试了什么：我删除了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 选项。 功能选项不能用作 Function，您应该使用 sassOption 作为 Function 来实现这一点。
• data 选项被重命名为 prependData 选项 sourceMap 选项的默认值取决于 devtool 值（eval/false 值不启用源 map 生成）

解决方案 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. 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

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

解决方案 v9

In ver9 as you can see in the docs https://github.com/webpack-contrib/sass-loader#options ( https://github.com/webpack-contrib/sass-loader#sassoptions , https://github .com/webpack-contrib/sass-loader#additionaldata ），如果我们将data更改为additionalData数据，它将修复无效选项错误。

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

Answer 3

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

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属性，您可以在以下提交中看到062991588769f2 。

Answer 4

indentedSyntax是sassOptions的一部分：

sassOptions: {  indentedSyntax: true  }

例如：

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

Answer 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
}

Answer 9

如果您使用的是 sass-loader 的更新版本，则需要使用其他数据而不是数据

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

Answer 10

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

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

Answer 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/