vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 & deep和important的写法

vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 & deep和important的写法

1、安装scss

# 安装node-sass 
npm install node-sass --save-dev  
# 安装sass-loader 
npm install sass-loader --save-dev     
# 安装style-loader
npm install style-loader --save-dev         

出现以下问题可能是版本错误

Modele build failed: TypeError: this.getResolve is not a function at Object.loader…

处理方法
将 “sass-loader”: “^8.0.0”，更换成了 “sass-loader”: “^7.3.1”

package.json中查找替换

npm install 
npm run dev

2、使用

三种写法

• 当前页面直接定义
• @import引入样式
• main.js引入公共样式

index.vue

<template>
   <div class="handle-box">
	 <img src="@/assets/svg/close.svg" alt="" srcset="" @click="close" />
     <span>关闭</span>
   </div>
</template>

<style scoped lang="scss">
 // 第一种写法——引入式
 @import "./index.scss";
 
 // 直接定义
.handle-box {
	display: flex;
	position: fixed;
	z-index: 100;
	right: 172px;
	top: 12px;
	> img {
		width: 40px;
		cursor: pointer;
		padding: 12px;
	}
	> img:hover {
		background-color: #2a2d36;
	}
    >span{
       color:#fff;
    }
}

:deep(.el-dialog) {
	.el-dialog__header {
		display: none;
	}
	.dj-dialog-content {
		padding: 0;
		overflow: unset;
	}
}
</style>

index.scss

.handle-box {
	display: flex;
	position: fixed;
	z-index: 100;
	right: 172px;
	top: 12px;
	> img {
		width: 40px;
		cursor: pointer;
		padding: 12px;
	}
	> img:hover {
		background-color: #2a2d36;
	}
    >span{
       color:#fff;
    }
}

:deep(.el-dialog) {
	.el-dialog__header {
		display: none;
	}
	.dj-dialog-content {
		padding: 0;
		overflow: unset;
	}
}

3、公共样式

3.1、定义样式

src\styles\common.scss

/* 常用 flex */
.flx-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.flx-justify-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flx-align-center {
	display: flex;
	align-items: center;
}

/* 清除浮动 */
.clearfix::after {
	display: block;
	height: 0;
	overflow: hidden;
	clear: both;
	content: "";
}

/* 文字单行省略号 */
.sle {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* 文字多了自動換行 */
.break-word {
	word-break: break-all;
	word-wrap: break-word;
}


// 多选
.el-checkbox.el-checkbox--small .el-checkbox__inner {
	width: 20px !important;
	height: 20px !important;
}
.el-checkbox.el-checkbox--small .el-checkbox__inner::after {
	width: 4px !important;
	height: 12px !important;
}
.el-checkbox__inner::after {
	left: 7px !important;
}

html,body,#app {
	width: 100%;
	max-width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	text-align: left;
}

3.2、引入样式

src\main.ts

// CSS common style sheet (CSS通用样式表)
import "@/styles/common.scss";