Sass Loader报错:ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

在vue.config.js中引入sass全局配置后报错vue.config.js代码如下:
module.exports = {
  devServer: {
    port: 3333,
    open: true
  },
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/scss/_variable.scss";`
      }
    }
  }
}

_variable.scss的代码如下:

$theme-color: #33aef0;

组件中的scss代码如下:

<style lang="scss">
#app {
  color: $theme-color;
  height: 100vh;
}
</style>

页面报错如下:

./src/assets/scss/reset.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/scss/reset.scss)
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 ‘data‘. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (E:\element-ui\vue-manage-system\node_modules\schema-utils\dist\validate.js:85:11)
    at Object.loader (E:\element-ui\vue-manage-system\node_modules\sass-loader\dist\index.js:36:28)
解决办法:将data改成prependData
// 旧
data: `@import "[email protected]/assets/scss/variables.scss";`
// 新
prependData: `@import "[email protected]/assets/scss/variables.scss";`

原文地址:https://www.cnblogs.com/xifeng59/p/12038878.html

时间: 2024-09-30 21:11:19

Sass Loader报错:ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.的相关文章

vue cli3使用官方方法配置sass全局变量报错ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

我使用官方文档提供的配置sass全局变量,但是报错! vue.config.js代码如下: module.exports = { css: { loaderOptions: { sass: { data: `@import "[email protected]/assets/scss/variables.scss";`, }, } } } variables.scss的代码如下: $color:#fff; 组件代码如下: <style lang="scss"

scss文件报错处理 (报错信息Invalid CSS after &quot;v&quot;: expected 1 selector or at-rule, was &#39;var api = require)

error in ./src/assets/styles/app.scss Module build failed: @import "./reset.scss"; ^ Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("' in /Users/aa/demo/new/src/assets/styles/app.scss (line 1, column

Jade报错:Invalid indentation,you can use tabs or spaces but not both问题

现象:通过html生成jade文件之后,更改jade文件时,语句没什么问题的情况下,jade文件编译不通过,报错:Invalid indentation,you can use tabs or spaces but not both. 原因:错误信息上已经写得很清楚了,是因为jade文件里出现了多余的空格导致文件编译不通过. 解决方法:在代码编辑器中设置tab替换空格,就ok了.

Lua报错:invalid key to &#39;next&#39;

1.问题产生的原因是,在一个循环里对table中的元素先进行置空操作,再进行增加新元素的操作,就会报这个错误. 2.比如下面的例子:(当中间的函数足够复杂并进行封装了的情况下,不会留意到存在这个问题) t = {1,2} function remove_ele() t[1] = nil end function add_ele() t[3] = 3 --err:增加原来没有的元素 --t[1] = 1 --correct:修改原有的元素 end for k,v in pairs(t) do re

esxi 5.1 因为断电错误无法启动 报错 bank5 invalid configuration

因为着急,处理过程中也没有截图,这里简单的描述下整个过程吧. IBM pcserver x3850 可能是机器太热的原因,中午无故掉电,导致esxi无法正常启动 启动时报错 bank5 invalid configuration no hypervistor found 启动盘里面有保留原来的datastore的选项,但是没有尝试过,所以这里先对虚拟机进行了一次备份操作. 备份: 使用linux live cd的方式挂接移动硬盘来进行备份: 这里使用的是systemrescuecd 简单好用,而

python安装locustio报错error: invalid command &#39;bdist_wheel&#39;的解决方法

locust--scalable user load testing tool writen in Python(是用python写的.规模化.可扩展的测试性能的工具) 安装locustio需要的环境条件是:Python2.6+,但是不支持Python3. 今天在cmd里运行pip install locustio,报错提示:error: invalid command 'bdist_wheel'. 原因:pip和setuptools的版本较低. 解决方案:升级pip和setuptools. 一

esxi 5.1 由于断电错误无法启动 报错 bank5 invalid configuration

由于着急,处理过程中也没有截图,这里简单的描写叙述下整个过程吧. IBM pcserver x3850 可能是机器太热的原因,中午无故掉电,导致esxi无法正常启动 启动时报错 bank5 invalid configuration no hypervistor found 启动盘里面有保留原来的datastore的选项,可是没有尝试过,所以这里先对虚拟机进行了一次备份操作. 备份: 使用linux live cd的方式挂接移动硬盘来进行备份: 这里使用的是systemrescuecd 简单好用

Myeclipse启动报错: Invalid &#39;log4jConfigLocation&#39; parameter

java.lang.IllegalArgumentException: Invalid 'log4jConfigLocation' parameter: class path resource [log4j.properties] cannot be resolved to URL because it does not exist 解决办法:勾选Enable project specific settings: 在Libraries 中: Myeclipse启动报错: Invalid 'log

eclipse编译动态链接库文件报错 relocation R_X86_64_32 against `.data&#39; can not be used when making a shared object; recompile with -fPIC

解决方法: 选中工程右键->属性(properties)->c/c++Build -> GCC C Compiler -> Command ->gcc -fPIC. 问题解决!! eclipse编译动态链接库文件报错 relocation R_X86_64_32 against `.data' can not be used when making a shared object; recompile with -fPIC 原文地址:https://www.cnblogs.c