vuecli3 引入全局scss变量_vue cli3使用官方方法配置sass全局变量报错

我使用官方文档提供的配置sass全局变量，但是报错！

‘;’还有官方强调的“~”都没落；

vue.config.js代码如下：

module.exports = {

css: {

loaderOptions: {

sass: {

data: `@import "~@/assets/scss/variables.scss";`,

},

}

}

}

variables.scss的代码如下：

$color:#fff;

组件代码如下：

// $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;

}

报错内容如下：

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_modulesschema-utilsdistvalidate.js:49:11)

at Object.loader (C:\Users\Administrator\Desktop\tang\node_modules\sass-load

erdistindex.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