vue3 + vite引入scss全局变量

1.没全局引入前写法

// 主题
$xtxColor:#27BA9B;
// 辅助
$helpColor:#E26237;
// 成功
$sucColor:#1DC779;
// 警告
$warnColor:#FFB302;
// 价格
$priceColor:#CF4444;

@mixin hoverShadow  {
  transition:all .5s;
  &:hover{
    transform: translate3d(0,-3px,0);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  }
}

 使用

<style lang="scss" scoped>
	@import '../../assets/style/';
	@import '../../assets/style/';
	.home-page {
		@include hoverShadow;
        color: $xtxColor;
	}
</style>

2.全局引入写法

plugins同级

export default defineConfig({
	plugins: [

	],


	css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "@/assets/style/" as *; @use "@/assets/style/" as *;'  //引入多个
				// additionalData: '@use "@/assets/style/" as *; '   //引入单个
      },
    },
  },

})

直接使用

<style lang="scss" scoped>
	.home-page {
		@include hoverShadow;
        color: $xtxColor;
	}
</style>