码迷,mamicode.com
首页 > Windows程序 > 详细

vue cli3使用官方方法配置sass全局变量报错ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

时间:2020-02-22 22:14:14      阅读:1344      评论:0      收藏:0      [点我收藏+]

标签:exports   var   size   known   validate   serve   pen   component   initial   

我使用官方文档提供的配置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";`

vue cli3使用官方方法配置sass全局变量报错ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

标签:exports   var   size   known   validate   serve   pen   component   initial   

原文地址:https://www.cnblogs.com/dekevin/p/12347019.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!