vue3.0中sass全局的使用过程

npm i sass-resources-loader --save-dev

$input-color: #888;

// css预设器配置项
loaderOptions: {
  // 给 sass-loader 传递选项
  scss: {
    // sass-loader版本V8以上
    prependData: '@import "~@/assets/common.scss";'
    // sass-loader版本V8以下
    // additionalData: '@import "~@/assets/common.scss";'
  }
}

input {
    color: $input-color;
}

"node-sass": "^4.14.1",
"sass-loader": "^9.0.3"

// colors
$colors: (
  "primary": #00E5FF,
  "purple": #9e6fef,
  "light-purple": #BFBDFF,
  'yellow': #FFF701
);
$base-font-size: 1rem;
$font-sizes: (
  xxs: 0.5714, // 8px
  xs: 0.7143, // 10px
  sm: 0.8571, // 12px
  md: 1, // 14px
  lg: 1.1429, // 16px
  xl: 1.4286 // 20px
);

@import './variables';
// color
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
}
// font-size
@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}

import ‘./assets/scss/style.scss'

 <h3 class="text-purple">大五人格测试</h3>