CODEWITHSUNDEEP
cssvue.jssassvuejs2vue-component
Henrik
Henrik

Reputation: 382

Scss styling not applied to Vue component

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

Upvotes: 2

Views: 285

Answers (2)

Henrik
Henrik

Reputation: 382

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.

Upvotes: 1

tony19
tony19

Reputation: 138636

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

Upvotes: 1

Related Questions