1.scss文件(mixin.scss)
// 设置宽高
@mixin wh($w, $h) {
width: $w;
height: $h;
}
2.配置loader
//vue.config.js
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/styles/mixin.scss";`
}
}
}
低版本的用data
//vue.config.js
css: {
loaderOptions: {
sass: {
data: `@import "~@/styles/mixin.scss";`
}
}
}
3.使用
<style lang='scss' scoped>
.header {
@include wh(100px, 100px);
}
</style>
在css中直接使用@include调用mixin即可。