Scss 样式不适用于 Vue 组件

Question

I have an Img component that consists of a figure with a nested image:

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

This component is used in another component, where I'm trying to overwrite the inner figure/image's style from the parent. The figure does get new styling, but the inner image does not.

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

The current version of this project is on my Github, so maybe it's easier to see the problem with a cloned repo? Github Repo

Answer 1

According to Vue own documentation

"Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ or::v-deep combinator instead - both are aliases for >>> and work exactly the same."

So instead of & >>> img do &::v-deep img . I hope this fixes your issue.

Answer 2

>>> seem to have no effect for the Sass implementations I've tried, including node-sass and sass . On the other hand, node-sass and sass still support /deep/ .

The following SCSS works for scoped styles with node-sass 4.14.1 and sass 1.26.9 :

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

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