Load file (mixin.less) in global for components

[davodaslanifakor]

Hi,
I want use global mixin.less,
for example:
i have one file by name mixin.less by this content

@ColorBase : #C2185B;
@colorText:#515f67;
@colorWhite:#fff;
@bgLight:#fff;
@bgTheme:#C2185B;
.box-clear{
	&:before ,&:after{
		clear: both;
		display: table;
		content: '',
	}
}

so next i want use this variable in my project

section {
  border-top: 2px solid @ColorBase;
}

for this way i most import my file in inside tag style:

<style lang="less">
          @import  url('../assets/less/mix.less');
....

and repeat this way to all my component,
but i don't like this way because when i build my project
Each time I loaded this file this compile to my styles.css
and this so bad my file size is very big
i want now how solve this problem i think can load mix.less global in project

Thanks in advance for your help

[davodaslanifakor]

this is beast answered ifond