Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an opt

ChargingPile

已于 2023-11-14 20:09:53 修改

阅读量4.6k

点赞数 1

文章标签： sass 前端 css

于 2023-11-14 20:02:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41009649/article/details/134406438

版权

文章讲述了在Vue项目中，由于SassLoader版本升级，配置中的data选项不再被支持，需要更改为additionalData或prependData，并提供了不同node-sass和sass-loader版本对应的关系。解决方法是更新配置以适应新的API接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. vue项目启动报错

'Syntax Error: 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:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }'

原因是 sass-loader 版本过高，config 配置发生变化

错误：
 css: {
    loaderOptions: {
      sass: {
        data: '@import "@/assets/scss/_variable.scss";'
      }
    }
  }
  正确：
   css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/assets/scss/_variable.scss";'
      }
    }
  }

sass-loader v8
该 data 选项已重命名为 prependData 选项

sass-loader v9.0
prependData 选项已被删除，取而代之的是 additionalData 选项

2. node 对 node-sass版本 在这里插入图片描述
3. node-sass对应 sass-loader 版本

sass-loader 4.1.1，node-sass 4.3.0

sass-loader 7.0.3，node-sass 4.7.2

sass-loader 7.3.1，node-sass 4.7.2

sass-loader 7.3.1，node-sass 4.14.1

sass-loader 10.0.1，node-sass 6.0.1