sass之mixin的全局引入(vue3.0)
1.scss文件(mixin.scss)
/* 渐变 */ @mixin gradual($color, $color1){ background: $color; /* Old browsers */ background: -moz-linear-gradient(top, $color 0%, $color1 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, $color 0%,$color1 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, $color 0%,$color1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$color, endColorstr=$color1,GradientType=0 ); /* IE6-9 */ }
2.配置loader
//vue.config.js
module.exports = {
//配置全局样式变量
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/style/common/mixin.scss";`
}
}
}
}
3.使用
<style lang='scss' scoped>
.header {
@include gradual(#29b474, #038f27);
}
</style>
在css中直接使用@include调用mixin即可。
钻研不易,转载请注明出处......