how to change the vue-intro.js css in nuxt.js

Question

I'm trying to change the CSS feature vue-intro tutorial for my web app. I'm having trouble with how to change the tooltip button color, themes in vue-intro.js.

I want to change Next button color. so, how to change CSS in nuxt.js project.

I added the below code as a plugin. but I can't change the CSS

import Vue from 'vue'
import VueIntro from 'vue-introjs'
import 'intro.js/introjs.css'


Vue.use(VueIntro)

Answer 1

Here's an SCSS utility to generate the CSS for it:

$btn-color: #f50;
$text-color: white;

a.introjs-nextbutton {
  background-color: $btn-color;
  border-color: darken($btn-color, 4.2%);
  text-shadow: none;
  color: $text-color;
  &:hover {
    background-color: lighten($btn-color, 4.2%);
    border-color: $btn-color;
    color: $text-color;
  }
  &:focus {
    box-shadow: 0 0 0 0.2rem transparentize($btn-color, .42);
    background-color: $btn-color;
    border-color: darken($btn-color, 4.2%);
    color: $text-color;
  }
}

Answer 2

I have done something similar before. I think the only way to do it is to overwrite the className or not import the intro.css (make your own). You need to "inspect element" to find out the introJS className from the library. Basically their className start with prefix introjs-something. I can even do things like display none for previous button or change its color. See picture below.

Click this to see My Inspect Element to find introjs classes