Default theme override structure

[FistMeNaruto]

Feature request

What problem does this feature solve?

Currently, the override.styl is unable to override style declarations properly, only variable overrides work as they should. This is due to config.styl being required at the top of most .styl files. This prevents override.styl declarations from working, since they are outputted before the default theme styles. This structure also has a side effect of repeating the style declarations (because they are required multiple times)

Here is an example:

Output for .content code element

How should this be implemented in your opinion?

I would suggest implementing 2 override files (styleOverride and variableOverride ? ). Keep variableOverride import at the bottom of config.styl and add styleOverride import at the bottom of theme.styl file. This would allow to override both variable and style declarations. To prevent breaking changes, variableOverride could be kept named override.styl

While webpack does a good job of stripping the repeated styles in production build, I don't see a reason to @require './config.styl' in all the files. Requiring it once at the top of theme.styl should be sufficient, right?

EDIT: After inspecting this a bit more, the repeated style declarations apparently come from theme components, as most of them @require the config.styl

Are you willing to work on this yourself?**

Yes, after getting a permission.

[LinFeng1997]

Maybe you can use !important to solve your problem.or use vuepress eject [targetDir] to overrider default theme?

[FistMeNaruto]

Ofcourse I can, both !important and ejecting would work, I am just offering to fix the underlying structure of the default theme so the !important (which should be avoided) and ejecting (which disables future theme updates) would not be necessary :)

[FistMeNaruto]

Can anyone confirm 2f53f2f fixed this issue? If so, it can be closed.

[ulivz]

@FistMeNaruto Yes, it has been fixed in f998802