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 Repo

Answer 1

根据Vue自己的documentation

“某些预处理器，例如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范围内的样式：

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

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

Scss样式不适用于Vue组件

2 个答案: