vue3 + vite引入scss全局变量

1.没全局引入前写法

variables.scss

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

mixins.scss

@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/mixins.scss';
	@import '../../assets/style/variables.scss';
	.home-page {
		@include hoverShadow;
        color: $xtxColor;
	}
</style>

2.全局引入写法

vite.config.ts

plugins同级

export default defineConfig({
	plugins: [

	],


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

})

直接使用

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