vue3中安装并使用CSS预处理器Sass的方法详解

npm install sass -D

// 全局变量 / globalVar.scss
$font-size-normal: 32px;
$bg-color: #1989fa;
// 全局mixin / globalMixin.scss
@mixin box-shadow($bulr: 20px, $color: #1989fa7a) {
    -webkit-box-shadow: 0px 0px $bulr $color;
    -moz-box-shadow: 0px 0px $bulr $color;
    box-shadow: 0px 0px $bulr $color;
}

//全局引入
css: {
    preprocessorOptions: {
      scss: {
        /**如果引入多个文件，可以使用
       * '@import "@/assets/scss/globalVariable1.scss";
       * @import"@/assets/scss/globalVariable2.scss";'
      **/
        additionalData: '@import "@/style/globalVar.scss";',
      }
    }
  },

<style scoped lang="scss">
@import "@/style/globalMixin.scss";
.test{
  width: 650px;
  height: 60px;
  font-size: $font-size-normal;
  background-color: $bg-color;
  @include box-shadow;
}

$primaryColor: #eeffcc;

body {
    background: $primaryColor;
}

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc;
  background: $primaryColor; //编译后#ccc
}
p {
  color: $primaryColor; //编译后#eeccff
}

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc !global;
  background: $primaryColor; //编译后#ccc
}
p {
  color: $primaryColor; //编译后#ccc
}

$fontDiff: (14px/16px);

$container-width: 100% - 20px;

$container-width: 100%;
.container {
  width: $container-width;
}
.col-4 {
  width: $container-width / 4;
}
// 编译后是这样的
//  .container {
//   width: 100%;
//  }
//
//  .col-4 {
//      width: 25%;
//  }

.container {
    width: 100%;
}
.container h1 {
    color: red;
}

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

a.myAnchor {
    color: blue;
    &:hover {
        text-decoration: underline;
    }
    &:visited {
        color: purple;
    }
}

@import "grids.scss";

@import "grids";