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;
    }
  }
}