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
• https://www.cnblogs.com/xzybk/p/14379861.html