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 上，所以也许更容易看到克隆 repo 的问题？ 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;
    }
  }
}