解决vue scoped scss 无效的问题

时间:2022-11-18 11:59:26

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

/deep/

  1. <style scoped lang="scss">
  2. .position-el-steps {
  3. /deep/ .el-step.is-vertical {
  4. .el-step__description {
  5. margin-top: -20px;
  6. }
  7.  
  8. .el-step__line {
  9. border-left: 2px dashed #c0c4cc;
  10. background-color: transparent;
  11. visibility: visible !important;
  12. }
  13. }
  14. }

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

前言

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

  1. <!-- 这个是 B 组件 -->
  2. <template>
  3. <div>
  4. <h1 class="my">我是B组件</h1>
  5. </div>
  6. </template>
  1. <!-- A组件 -->
  2. <template>
  3. <div class="boxA">
  4. <A/>
  5. </div>
  6. </template>
  7. <script>
  8. import A from './a'
  9. export default {
  10. name: 'index',
  11. components:{
  12. A
  13. }
  14. }
  15. </script>
  16. <style scoped>
  17. /* 使用 scoped 更改的组件样式。 */
  18. /*
  19. 此处只是举个栗子使用,没有经过验证。很多人会下面这摸写,但是发现改变不了B组件的样式,其实是 scoped 局部的,所以不能。
  20. .boxA .my {
  21. color:red;
  22. }
  23. */
  24. .boxA /deep/ .my {
  25. color:red;
  26. }
  27. </style>

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

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

看下图:

解决vue scoped scss 无效的问题

修改组件样式三种方式

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

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

vue /deep/ 警告

解决vue scoped scss 无效的问题

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

解决vue scoped scss 无效的问题

第一种:使用 /deep/

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

  1. <template>
  2. <div class="box-out">
  3. <step v-model="step1" background-color='#fbf9fe'>
  4. <step-item title="步骤一" description="step 1"></step-item>
  5. <step-item title="步骤二" description="step 2"></step-item>
  6. <step-item title="步骤三" description="step 3"></step-item>
  7. </step>
  8. </div>
  9. </template>
  10.  
  11. <script>
  12. import { Step, StepItem, XButton, XHr } from 'vux'
  13. export default {
  14. name: 'box',
  15. data () {
  16. return {
  17. step1: 1,
  18. step2: 0
  19. }
  20. },components: {
  21. Step,
  22. StepItem,
  23. XButton,
  24. XHr
  25. }
  26. }
  27. </script>
  28.  
  29. <style scoped>
  30. /*
  31. 修改样式
  32. 通过使用 box-out 的class类,找到下面组件内的class类,中间必须得使用 /deep/ 才能找到下面的class类。
  33. */
  34. .box-out /deep/ .xxxxx组件样式类 {
  35. color: red;
  36. }
  37. </style>

方法二:使用 >>>

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

  1. <template>
  2. <div class="box-out">
  3. <step v-model="step1" background-color='#fbf9fe'>
  4. <step-item title="步骤一" description="step 1"></step-item>
  5. <step-item title="步骤二" description="step 2"></step-item>
  6. <step-item title="步骤三" description="step 3"></step-item>
  7. </step>
  8. </div>
  9. </template>
  10.  
  11. <script>
  12. import { Step, StepItem, XButton, XHr } from 'vux'
  13. export default {
  14. name: 'box',
  15. data () {
  16. return {
  17. step1: 1,
  18. step2: 0
  19. }
  20. },components: {
  21. Step,
  22. StepItem,
  23. XButton,
  24. XHr
  25. }
  26. }
  27. </script>
  28.  
  29. <style scoped>
  30. /*
  31. 修改样式
  32. 通过使用 box-out 的class类,找到下面组件内的class类,中间必须得使用 >>> 才能找到下面的class类。
  33. */
  34. .box-out >>> .xxxxx组件样式类 {
  35. color: red;
  36. }
  37. </style>

方法三:使用全局样式表(不推荐)

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

  1. <!-- 情况下,引入全局得样式,或者是直接在 app.vue 文件中写全局得。下面是在全局得app.vue中写 -->
  2. <template>
  3. <div id="app">
  4. <router-view/>
  5. </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10. name: 'App'
  11. }
  12.  
  13. </script>
  14.  
  15. <style>
  16. /* 上面没加 scoped 属性,所以全局样式 */
  17. .box-out .xxxxx组件样式类 {
  18. color: red;
  19. }
  20. </style>

另外说点其他技巧

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

解决vue scoped scss 无效的问题

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

原文链接:https://blog.csdn.net/Allence_z/article/details/84495452