Override plugin styles

[GreenImp]

Hi,

I'm writing a plugin, which provides a Vue component, with an imported stylesheet.

The plugin is here: https://github.com/dice-roller/vuepress-plugin/

DiceRoller.js (The component):

import { DiceRoller } from '@dice-roller/vue';
import '../styles/vars.css';
import '../styles/dice-roller.css';

export { DiceRoller };
export default DiceRoller;

dice-roller.css:

.dice-roller{
    margin: 1rem 0;
    padding: 1rem 1.5rem;
    color: var(--dice-roller-color);
    background-color: var(--dice-roller-bg);
}

...

vars.css:

:root {
    --dice-roller-text-color: #2c3e50;

    --dice-roller-bg: #eeeeee;
    --dice-roller-color: var(--dice-roller-text-color);
    ...
}

This works fine to load in some default styles for the plugin, but I want people who implement the plugin to be able change the look of the component, by overriding the CSS variables.

I followed the docs to create a styelsheet at .vuepress/styles/index.scss, with CSS variables to override the plugin styles:

:root {
  --dice-roller-text-color: #ff0000;
  ...
}

Unfortunately though, those styles don't get applied. It looks like they get added to the doc before the plugin stylesheet, so the plugin stylesheet gets precedent, and the styles don't get changed (I can see the local styles in dev tools, being overridden by the plugin ones).

Judging by the documentation for the Back To Top plugin, it looks like it should be possible this way: https://v2.vuepress.vuejs.org/reference/plugin/back-to-top.html#styles

I did try to change the back to top styles as well, just in case it was an issue with my plugin, but that had the same issue.

Can anyone help me with finding a way of easily overriding the styles of a plugin?

[Mister-Hope]

Why don't you tell users to use ! important

[GreenImp]

!important isn't really a good solution as it just makes it more difficult to override styles. The plugin has variables that change on things like hover / focus events. Using !important would make doing things like, changing the default state, but not the hover state quite difficult.

I was hoping there would be a way of telling Vuepress to load the custom stylesheet after the plugin styles, or something similar.

[Mister-Hope]

cc @meteorlxy The problem seems to be the one I once reported through WeChat.

technically speaking, plugin style may be loaded after theme, but user custom style file is loaded at the end of theme style, so plugin style might get a higher priority.

This may be something we should treat as a bug.

[Mister-Hope]

I created an issue #1110 and you can tract this.

Currently you can use !important or a higher priority selector as a workaround.