将公共的CSS提取出来,可以简化CSS的编写,一般将mxin单独写在一个叫mixin.scss文件当中,全局引入。
1.scss文件(mixin.scss)
// 设置宽高
@mixin wh($w, $h) {
width: $w;
height: $h;
}
2.配置vite
//vite.config.ts
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/styles/mixin.scss";'
}
}
}
3.使用
<style lang='scss' scoped>
.header {
@include wh(100px, 100px);
}
</style>
在css中直接使用@include调用mixin即可