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 "@/assets/scss/_variable.scss";`
 // 新
prependData: `@import "@/assets/scss/_variable.scss";`
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM