vite中使用scss技巧

一、样式混合

1.普通用法

css 复制代码
@mixin flex() {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

//使用方法
.legend_box_item {
	width: 50%;
	height: 10px;
	@include flex;
}

2.传递参数,参数后面的值为默认值

css 复制代码
@mixin flex($justify: flex-start, $align: flex-start) {
    display: flex;
    justify-content: $justify;
    align-items: $align;
}
//使用方法
.legend_box_item {
	width: 50%;
	height: 10px;
	@include flex;   //没传递参数,使用默认值
}
//===============================================
 .legend_box_item {
	width: 50%;
	height: 10px;
	@include flex(space-between,center);  //传递参数
}

3.类似于vue插槽用法

css 复制代码
@mixin flex($justify: flex-start, $align: flex-start) {
    display: flex;
    justify-content: $justify;
    align-items: $align;
    @content;  //类似vue的slot
}
//使用方法
 .legend_box_item {
	width: 50%;
	height: 10px;
	@include flex(space-between,center){
		color:#ffffff;   //这里就是放入插槽的内容
	};
}

二、全局引入scss文件

上面的混入不可能每个文件都写一份吧,而且你直接在main.ts文件引入一个scss文件,是没法使用里面的混合器以及变量的,必须在vite里面配置

javascript 复制代码
 css: {
    preprocessorOptions: {
      scss: {
        //原理很简单,就是在编译的时候,会把这字符串塞进每一个scss文件中,
        //相当于每个scss中都写了一个引入,所以这里可以引入多个scss文件
        additionalData: `@import "@/css/mixin.scss";
        				 @import "@/css/a.scss";
        				 @import "@/css/b.scss";`,  
      },
    },
  },
相关推荐
vvilkim2 分钟前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心13 分钟前
vben 之 axios 封装
前端·javascript·学习
遗憾随她而去.28 分钟前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_090144 分钟前
浅析Web存储系统
前端
foxhuli2291 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端
青皮桔2 小时前
CSS实现百分比水柱图
前端·css
失落的多巴胺2 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
影子信息2 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月2 小时前
1.vue权衡的艺术
前端·vue.js·开源
样子20182 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript