0

Whatever I try, it wont work, here it is:

<div class="text text-center">
   <p class="cosmic-links" v-html="infoText"></p>
</div>

Here is how it looks like in cosmicjs

<p>Some info</p>
<p>Some links to visit <a href="www.google.com" rel="noopener noreferrer" target="_blank">FAQ</a></p>

What I am trying:

.cosmic-links >>> a{
   color:red;
}
pancake
  • 590
  • 7
  • 24

1 Answers1

0

According to vue-loader doc(source):

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.

With pre-processor Sass /deep/ or ::v-deep should work:

.cosmic-links /deep/ a {
  color: red;
}

Quick Sandbox

BSYoann
  • 156
  • 5
  • Do you have something different than in the minimalist sandbox i provided ? – BSYoann Jul 20 '20 at 09:08
  • Could this be due to that the hyperlink is being overriden somewhere else globally? – pancake Jul 20 '20 at 09:12
  • I just solved the problem by removing scoped from the style tag. that's very weird – pancake Jul 20 '20 at 09:14
  • My bad, with scoped style you're right and using deep selector >>> should work. I updated it on my codesandbox and it seems to work. Howerver you seem to have the same problem as https://stackoverflow.com/questions/44844788/vue-js-style-v-html-with-scoped-css and replace >>> by /deep/ seems to work. You can see my edited answer. – BSYoann Jul 20 '20 at 09:21
  • 1
    Thanks, it works perfectly and i have never seen /deep/ before with all the years i've been working on frontend – pancake Jul 20 '20 at 09:28
  • 1
    Maybe you're using a pre processor like sass or less. According to the doc of vue-loader: "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." (source: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) – BSYoann Jul 20 '20 at 09:34
  • I just recently recieved this error: /deep/ combinator is no longer supported in CSS dynamic profile – pancake Jul 24 '20 at 08:59
  • Did you tried ::v-deep ? Give a look at this thread https://github.com/vuejs/vue-loader/issues/913 – BSYoann Jul 24 '20 at 10:05
  • I solved the problem and yes i also did try it without success. I think vue needs to update their documentation – pancake Jul 24 '20 at 12:20