vue 全局scss配置和sass语法

vue 全局scss配置

vue.config.js

css: {
        sourceMap: false,
        loaderOptions: {
            sass: {
                data: `@import "@/assets/style/global.scss";`
            }
        }
    }

global.scss

$globalMainColor:#41B2EA;
$globalMainColor2:#af74ec;
$globalMainColor3:#f3f7fd;


@mixin gobalWidth {
    width: 1200px;
    margin: 0 auto;
}
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

test.scss

.scoll-top {
      @include gobalWidth;
      position: relative;
      img {
        padding-top: 5px;
      }
}
.myBox {
  @include transform(rotate(20deg));
}

.button-report  {
  @extend .myBox;
  background-color: red;
}