0x00 问题描述

运行npm run serve的时候报错

error  in ./src/layout/index.vue?vue&type=style&index=0&id=13877386&lang=scss&scoped=true

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 'prependData'. These properties are valid:
   object { implementation?, api?, sassOptions?, additionalData?, sourceMap?, webpackImporter?, warnRuleAsWarning? }

0x01 解决方案

作为一个懒人，我是没看完整个错误。直接百度scss has an unknown property 'prependData'。然后得到结论就是，npm和sass-loader的版本高了。

原来的

css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/scss/settings.scss";'
      }
    }
  }

修改后的

css: {
    loaderOptions: {
      sass: {
        additionalData: '@import "@/scss/settings.scss";'
      }
    }
  }

修改，编译，正常。

0x02 参考文章

• https://www.lanwuyaojiu.cn/blogm/blogart-115.html
• https://stackoverflow.com/questions/65005674/options-has-an-unknown-property-prependdata-these-properties-are-valid