解决vue scoped scss 无效的问题

2024-04-22 12:25:23

今天遇到scoped内部的scss设置无效，解决办法如下：

/deep/

<style scoped lang="scss">
.position-el-steps {
 /deep/ .el-step.is-vertical {
 .el-step__description {
  margin-top: -20px;
 }

 .el-step__line {
  border-left: 2px dashed #c0c4cc;
  background-color: transparent;
  visibility: visible !important;
 }
 }
}

补充知识：【vue scoped 样式修改】框架或插件组件样式更改及/deep/ 警告

前言

在做vue项目的时候，很多人应该已经碰到在vue 组件中，style 局部修改样式更改不了

<!-- 这个是 B 组件 -->
<template>
 <div>
 <h1 class="my">我是B组件</h1>
 </div>
</template>

<!-- A组件 -->
<template>
 <div class="boxA">
 <A/>
 </div>
</template>
<script>
 import A from './a'
 export default {
 name: 'index',
 components:{
 A
 }
 }
</script>
<style scoped>
 /* 使用 scoped 更改的组件样式。 */
 /*
 此处只是举个栗子使用，没有经过验证。很多人会下面这摸写，但是发现改变不了B组件的样式，其实是 scoped 局部的，所以不能。
 .boxA .my {
 color:red;
 }
 */
 .boxA /deep/ .my {
 color:red;
 }
</style>

修改 vue 插件或者框架内组件使用

语法： .自己定义的类名 /deep/ .组件内的类名 { /* 代码块 */ }

看下图：

修改组件样式三种方式

以下例子以 vux 来弄。 /deep/ 和 >>> 在vue中会自动生成选择器的选择属性，你在页面中，会看到控制台中的会有 [data-v-xxxxxx] 的。

注意：在谷歌中，也有这个 /deep/ 中间选择器，但是谷歌放弃这个，如果在你控制台出现下面的图片的警告，证明你写错了，多写了 /deep/ https://www.chromestatus.com/features/4964279606312960

vue /deep/ 警告

解决方案：只要在页面中去查找下即可，利用vue渲染后会把所有的，会在控制台能看到

第一种：使用 /deep/

推荐的。看下面例子。注意：使用 cass 和 less 只能使用 /deep/ 这个方法

<template>
 <div class="box-out">
 <step v-model="step1" background-color='#fbf9fe'>
  <step-item title="步骤一" description="step 1"></step-item>
  <step-item title="步骤二" description="step 2"></step-item>
  <step-item title="步骤三" description="step 3"></step-item>
 </step>
 </div>
</template>

<script>
import { Step, StepItem, XButton, XHr } from 'vux'
export default {
 name: 'box',
 data () {
 return {
  step1: 1,
  step2: 0
 }
 },components: {
  Step,
  StepItem,
  XButton,
  XHr
 }
}
</script>

<style scoped>
 /*
 修改样式
 通过使用 box-out 的class类，找到下面组件内的class类，中间必须得使用 /deep/ 才能找到下面的class类。
 */
 .box-out /deep/ .xxxxx组件样式类 {
 color: red;
 }
</style>

方法二：使用 >>>

使用这三个大于号就可以找到，跟上面的 /deep/ 差不多。

<template>
 <div class="box-out">
 <step v-model="step1" background-color='#fbf9fe'>
  <step-item title="步骤一" description="step 1"></step-item>
  <step-item title="步骤二" description="step 2"></step-item>
  <step-item title="步骤三" description="step 3"></step-item>
 </step>
 </div>
</template>

<script>
import { Step, StepItem, XButton, XHr } from 'vux'
export default {
 name: 'box',
 data () {
 return {
  step1: 1,
  step2: 0
 }
 },components: {
  Step,
  StepItem,
  XButton,
  XHr
 }
}
</script>

<style scoped>
 /*
 修改样式
 通过使用 box-out 的class类，找到下面组件内的class类，中间必须得使用 >>> 才能找到下面的class类。
 */
 .box-out >>> .xxxxx组件样式类 {
 color: red;
 }
</style>

方法三：使用全局样式表（不推荐）

前面两种方式是都是局部的（推荐），也是可以通过全局样式表改，当然记得在外面添加命名空间（不懂css 的命名空间的话，自行百度）。这个推不推荐的得看个人。希望能够根据业务需求进行增加修改。

<!-- 情况下，引入全局得样式，或者是直接在 app.vue 文件中写全局得。下面是在全局得app.vue中写 -->
<template>
 <div id="app">
 <router-view/>
 </div>
</template>

<script>
export default {
 name: 'App'
}

</script>

<style>
/* 上面没加 scoped 属性，所以全局样式 */
.box-out .xxxxx组件样式类 {
 color: red;
 }
</style>

另外说点其他技巧

如果在浏览器中，看到当前的 vue组件属性 [data-v-xxxxxx] 的话，那么可以直接拿过来使用，碧如下面：

以上这篇解决vue scoped scss 无效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

基于vue中的scoped坑点解说

今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件.通过查看DOM结构发现:vue通过在DOM结构以及css样式上加唯一不重复的标记,以保证唯一,达到样式私有化模块化的目的. 代码如下: //valChange.less(使用了嵌套规则) #valueSlide{ .bigSlider
深入探索VueJS Scoped CSS 实现原理

使用VueJS进行应用开发, 脱离不了对应用间的模块进行拆分, 将大块界面拆解为组件的过程. 我们可以很方便的在单文件中使用<template>块维护组件的视图, 使用<script>维护组件的逻辑部分, 使用<style>维护组件的样式. 在我们编写 VueJS 组件样式时, 不得忽略的一点就是样式污染. 样式污染产生原因提及样式污染, 主要要追溯到Webpack对CSS文件的打包过程, 这里我们以Vue-Element-Admin中的Webpack配置项举例: c
详解从vue-loader源码分析CSS Scoped的实现

虽然写了很长一段时间的Vue了,对于CSS Scoped的原理也大致了解,但一直未曾关注过其实现细节.最近在重新学习webpack,因此查看了vue-loader源码,顺便从vue-loader的源码中整理CSS Scoped的实现. 本文展示了vue-loader中的一些源码片段,为了便于理解,稍作删减.参考 Vue CSS SCOPED实现原理 Vue loader官方文档相关概念 CSS Scoped的实现原理在Vue单文件组件中,我们只需要在style标签上加上scoped属性,就可
Vue.js特性Scoped Slots的浅析

什么是scoped slots A scoped slot is a special type of slot that functions as a reusable template (that can be passed data to) instead of already-rendered-elements. 上面是官方的定义. 作用域插槽(Scoped Slots)是vue.js中一个非常有用的特性,它可以使组件更加通用和复用.唯一的问题是理解起来比较困难.试图去让你理解父与子作用域
Vue scoped及deep使用方法解析

众所周知,在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染,scoped使得组件内的样式变成局域样式,只作用于当前组件. 原理如下------- 在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个[data-v-hash]属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素.值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被
详解Vue中的scoped及穿透方法

scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这
.vue文件加scoped 样式不起作用的解决方法

浅谈关于.vue文件中的style的scoped属性注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响. 1.在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块.但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度. 一.创建公共组件button: //button.
解决vue scoped scss 无效的问题

今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent
element组件中自定义组件的样式不生效问题(vue scoped scss无效)

目录 element组件中自定义组件的样式不生效解决方法 Element-UI修改样式不影响其他组件需求描述方法 element组件中自定义组件的样式不生效当我们在项目中需要给element组件加上一些自定义样式的时候,往往是不生效的. 这是因为Vue项目中使用第三方框架的时候,Vue中有scoped,声明了样式是在组件范围内生效的,避免了不同组件的样式污染. 解决方法 1. 去掉scoped 这种方法确实可以实现效果,简单粗暴,却会造成不同组件样式污染,不建议. 2. 使用 /deep
解决vue scoped html样式无效的问题

1.问题场景 page1,page2都使用flexible移动端自适应的时候,有一个页面page2需要手动设置rem基准值, //手动设置基准 html{ font-size: 120px !important; } 但是在page2引用的self.less里面设置了基准,竟然没有生效 2.问题分析scoped属性在引用self.less的时候,使用了属性scoped vue中引入了scoped这个概念,设计思想就是让当前组件的样式不会修改到其他页面的样式,使用了data-v-hash的方式来
解决vue 退出动画无效的问题

遇到一个问题:给模态框加入退出动画,进入的动画效果是有的,可是退出的动画就没有了. 写个简单的结构: <div class="<strong>mask</strong>" v-show="warning"><br> <transition name="warning"><br> <div v-show="warning" class="wa
解决vue中使用less/sass及使用中遇到无效的问题

一:使用方法在vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass. 先使用npm下载依赖,命令行为'npm install less less-loader –save',再在webpack.base.conf.js中添加rules对象: { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }` 然后在style标签中添加lang="less"即可,或者直
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

项目类型:vue+vux+axios 刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面.直接调用接口,一切正常. 然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值.刚开始一切都是按照预期的结果来走的.就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我
快速解决vue动态绑定多个class的官方实例语法无效的问题

首先,直接进入正题,我想要给一个dom绑定多个class,而且是动态绑定,这个时候可以用v-bind简写可以写为" :"冒号,我查了官方的语法, 具体如下:  <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[cl
解决vue.js this.$router.push无效的问题

如下所示: login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password }) .then(res => { let userPwd = res.data if(this.password == userPwd) { this.$router.push(&qu
解决vue admin element noCache设置无效的问题

1.后台返回的数据 { path: '/fbgq', name: 'fbgq', component: () => import('../views/part/fbgq.vue'), meta: { title: '发布供求', noCache:false } }, 2.对应vue文件fbgq.vue 要在script设置统一的name名称 export default { name:"fbgq", } 以上这篇解决vue admin element noCache设置无效的问题
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

问题: 使用this.$ref['form'] .resetFields()无法重置表单项原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu

解决vue scoped scss 无效的问题

相关推荐

随机推荐