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 "~@/assets/scss/variables.scss";`, }, } } }
variables.scss的代码如下:
$color:#fff;
组件代码如下:
<style lang="scss" type="text/css" scope> // $tcolor:red; .title{ position: fixed; left: 0; top: 0; width: 100%; height: 40px; background-color: cornflowerblue; } .title p { width: 100%; height: 100%; line-height: 40px; text-align: center; font-size: 20px; color: $color; } </style>
报错内容如下:
error in ./src/components/header.vue?vue&type=style&index=0&lang=scss&scope=tr ue& 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?, webpackImpo rter? } at validate (C:\Users\Administrator\Desktop\tang\node_modules\sass-loader\no de_modules\schema-utils\dist\validate.js:49:11) at Object.loader (C:\Users\Administrator\Desktop\tang\node_modules\sass-load er\dist\index.js:36:28) @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader?? ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node _modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cj s.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_ modules/vue-loader/lib??vue-loader-options!./src/components/header.vue?vue&type= style&index=0&lang=scss&scope=true& 4:14-445 14:3-18:5 15:22-453 @ ./src/components/header.vue?vue&type=style&index=0&lang=scss&scope=true& @ ./src/components/header.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loade r/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loade r/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js& @ ./src/App.vue?vue&type=script&lang=js& @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.0.101:8080/sockjs-node (webp ack)/hot/dev-server.js ./src/main.js
问题原因:
新版 sass-loader导致的,更换如下配置来解决:
// 旧 data: `@import "~@/assets/scss/variables.scss";` // 新 prependData: `@import "~@/assets/scss/variables.scss";`
文章来自:https://www.cnblogs.com/dekevin/p/12347019.html