Scss 樣式不適用於 Vue 組件

Question

我有一個Img組件，它由一個帶有嵌套圖像的圖形組成：

<figure>
  <img @dragstart="stopDrag" :src="src" />
</figure>

該組件用於另一個組件，我試圖從父組件覆蓋內部圖形/圖像的樣式。 該圖確實獲得了新的樣式，但內部圖像沒有。

<template>
    <List>
      <li class="gridItem">
        <Img :src="require('@/assets/images/girl.png')" />
      </li>
    </List>
<template>

...

<style scoped lang="scss">
.gridItem {
  & figure {
    width: 100%;
    height: 100%;
    
    //I did try & >>> img, and it didn't work.

    & img {
      width: auto;
    }
  }
}
</style>

這個項目的當前版本在我的 Github 上，所以也許更容易看到克隆回購的問題？ Github 回購

Answer 1

根據Vue自己的文檔

“某些預處理器，例如 Sass，可能無法正確解析 >>>。在這些情況下，您可以改用 /deep/ 或::v-deep 組合器 - 兩者都是 >>> 的別名並且可以正常工作相同。”

所以代替& >>> img做&::v-deep img 。 我希望這可以解決您的問題。

Answer 2

>>>似乎對我嘗試過的 Sass 實現沒有影響，包括node-sass和sass 。 另一方面， node-sass和sass仍然支持/deep/ 。

以下 SCSS 適用於具有node-sass 4.14.1和sass 1.26.9 的范圍 styles ：

.gridItem {
  & figure {
    width: 100%;
    height: 100%;

    & /deep/ img {
      width: 500px;
    }
  }
}