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

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

vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
vue中实现动画效果--三种方式
一.普通动画实现效果用一个按钮, 控制一个 div 的淡入和淡出步骤使用 js 控制 div 的 class name 点击 function anime() {var boxDom = do ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
Vue中模板template的四种写法
<div id="app"><h1>我是直接写在构造器里的模板1</h1> </div><template id=" ...
vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...
HTML的样式及引入样式的三种类型
引入样式样式引入样式的三种类型内联样式行内样式外部引入样式名样式字体颜色 color: ; 背景颜色 background-color: ; 字体大小 font-size: ; 外边距 ...
引入CSS样式的三种方法
样式表放在不同的地方,产生作用的范围也不同.大致来说,样式表分为内联样式表和外联样式表,即有页面内放置.外部引用.外部导入三种方式. 内联样式表内联样式表就是把样式表规则放在 < HEAD&g ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
LaTeX 中处理参考文献的三种方法总结
LaTeX 中处理参考文献的三种方法总结方法一:用BibLaTeX处理分成如下四步: 第一步:制作生成bib文件: 第二步:在导言区需要加入biblatex宏包: \usepackage[格式控制 ...

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

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

1、安装scss

2、使用

三种写法

3、公共样式

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

最新文章

热门文章