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";