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-loadernpm 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";
vue中 scss样式的三种写法——当前页面直接定义 @import引入样式 main.js引入公共样式 deep和important的写法
