第一步:在新建一个scss文件
src/styles/mixins.scss
//定位上下左右居中
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//长、宽
@mixin wh($width, $height:$width){
width: $width;
height: $height;
}
第二步: 在项目vue.config.js中配置
关键代码
官方文档: 向预处理器-loader-传递选项
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `@import "@/styles/mixins.scss";` // 对应的scss文件路径
}
}
},
}
配置项 示例图:
第三步,直接在页面用使用,无需引入,使用方式如下
<style lang="scss" scoped>
.box {
@include center;
@include wh(100%, 100%);
}
</style>
完成如上步骤即可实现!!!
如果觉得有用欢迎点赞关注