npm install sass -d

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData:'@import "./src/assets/style/main.scss";'
      }
    }
  }
})

<style lang='scss'>
    body{
        background-color: $blue
    }
</style>    

$color-green: #0f0;
$color-green: #f55 !default;

$hello: $color-green;

@mixin border-radius($radius: 5px, $borderRadius: 8px) {
  border: {
    radius: $radius;
    top: $borderRadius solid #ff0;
    bottom: $borderRadius solid #f00;
    left: $borderRadius solid #00f;
    right: $borderRadius solid #888;
  }
}

@include border-radius(5px, 1px);

  .inner {
    width: 10px;
    height: 10px;
    background-color: $blue;
  }
 
  $hover: #333;
 
  &:hover {
    background-color: $hover;
  }
 
//其實就是
    
  .inner {
    width: 10px;
    height: 10px;
    background-color: $blue;
  }
 
  $hover: #333;
 
  .inner:hover {
    background-color: $hover;
  }

@mixin btn($width: 50px, $height: 20px, $font-size: 16px) {
  width: $width;
  height: $height;
  font-size: $font-size;
  text-align: center;
  line-height: $height;
  @include border-radius(5px, 1px);
  &:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.btn {
  @include btn(80px, 30px, 12px);
  margin: {
    top: 10px;
  }
}
.btn-primary {
  @extend .btn;
  background-color: $light-blue;
  color: $fontColor;
}

%pd {
  padding-top: 100px;
}

  @extend %pd;