vue cli3使用官方方法配置sass全局变量报错ValidationError: Invalid options object. Sass Loader has been initialised

Posted 2021-03-08 dekevin

我使用官方文档提供的配置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:UsersAdministratorDesktop	ang
ode_modulessass-loader
o
de_modulesschema-utilsdistvalidate.js:49:11)
    at Object.loader (C:UsersAdministratorDesktop	ang
ode_modulessass-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

问题原因：

新版 sass-loader导致的，更换如下配置来解决：

// 旧
data: `@import "~@/assets/scss/variables.scss";`
// 新
prependData: `@import "~@/assets/scss/variables.scss";`