解決vue scoped scss 無效的問題

阿新 • • 發佈：2020-09-07

今天遇到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/ .元件內的類名 { /* 程式碼塊 */ }

看下圖：

解決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/ 這個方法

<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,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,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 無效的問題