Css not being read in Vue Single File Component

[akinhwan]

I have included the following css, but am still seeing the dynamically generated style for the .typed character as color: #000 black
.vue-typer{ font-family: 'Space Mono', monospace; } .vue-typer .custom.char.typed{ color: #FFF !important; }

[akinhwan]

oddly enough .vue-typer { font-family: monospace; } is working, but none of my more specific selectors are working

[akinhwan]

I figured it out...you need to remove scoped from style tag for vue single file components. This should definitely be mentioned in the docs, was about to bash my head in ;)

[wowtrxqn]

I figured it out...you need to remove scoped from style tag for vue single file components. This should definitely be mentioned in the docs, was about to bash my head in ;)

is not work

[thooyork]

try the prefix /deep/ like so:

/deep/ .typed{
color:rgb(255,255,255);
}

[headStyleColorRed]

I figured it out...you need to remove scoped from style tag for vue single file components. This should definitely be mentioned in the docs, was about to bash my head in ;)

Jesus Christ! Thank You!
I just created another pair of style tags underneat without the scope, as you said, and it worked instantly. Genious hahah :D

[GeorgeFlorian]

/deep/ is being deprecated so we will have to use ::v-deep instead and also !important

If you still want to use scoped which is recommended, you need to do it like this:

  ::v-deep .typed {
    color: #fff !important;
  }

That is the only thing that allowed me to set CSS rules to it.

[sumihiro]

my best solution is

::v-deep .vue-typer {
  .custom.char.typed {
    color: #fff;
  }
}

[Larkify]

I figured it out...you need to remove scoped from style tag for vue single file components. This should definitely be mentioned in the docs, was about to bash my head in ;)

Thank you sooooo much...... couldn't figure it out AT ALL.

[TavaresDylan]

my best solution is

::v-deep .vue-typer {
  .custom.char.typed {
    color: #fff;
  }
}

It works for me , thanx 🙂